제출 양식에서 생성된 URL을 JavaScript로 가져옵니다.

제출 양식에서 생성된 URL을 JavaScript로 가져옵니다.

제출' 이벤트를 실행할 때 양식에서 생성된 URL을 잡을 수 있습니까?

데이터에서 URL을 생성할 수 있다는 것을 알고 있습니다.

양식의 작업 URL을 말하는 것이 아닙니다.

그러니까.?field=value&other-input-name=value& ...일부

시나리오:

양식과 Ajax 요청을 PHP 스크립트로 보내는 자바스크립트가 있습니다.

저는 보통 이렇게 합니다.

• 양식 제출 이벤트 등록
• 기본 동작 방지
• 데이터로 URL 구성
• 구성된 URL로 HTTP 요청 열기

자, 저는 보통 (Ajax가 아닌 요청에 대해) '제출'을 실행할 때 URL은 양식에 의해 구성되고, 그 양식은 그 URL을 사용하여 PHP 상대방에게 데이터를 전송하는지 궁금합니다.

그 URL을 어떻게 '캐치'할 수 있습니까?이벤트 자체에서 저장이 안 되는 것처럼 보이는 단서가 없거나 적어도 찾을 수 없었습니다.

어딘가에 있을거에요!

이것은 물건들로 가능하고 쉽습니다.URLSearchParams그리고.FormData.

FormData를 사용하기 위한 형태의 객체 표현입니다.fetchAPI. 기존 요소로 다음과 같이 구성할 수 있습니다.

let form = document.forms[0];
let formData = new FormData(form);

그 다음에 올 것입니다.URLSearchParams쿼리 문자열을 빌드하는 데 사용할 수 있는 object:

let search = new URLSearchParams(formData);

이제 검색 개체에서 toString 함수를 호출하기만 하면 됩니다.

let queryString = search.toString();

알았어!

양식의 작업 URL을 가져온다는 뜻이라면 다음과 같이 해당 URL을 검색할 수 있습니다.

document.getElementById("form-id").action

만약 당신이 jQuery를 사용하고 있고 Ajax 요청을 한다고 가정한다면 다음과 같습니다.

var el = $('#form-id');
$.ajax({
    type: el.attr('method'),
    url: el.attr('action'),
    data: el.serialize(),
    context: this
}).done(callback);

간단히 말하면, 당신은 할 수 없습니다.폼 필드 값을 직접 수집하거나 jQuery의 .serialize() 함수를 사용하여 이러한 값을 원하는 대로 정확하게 반환하는 것이 최선입니다.

name=value&name2=value2

이미 기술된 바와 같이 브라우저에서 생성하는 폼 값이 포함된 생성된 URL을 얻을 수는 없지만 직접 구성하는 것은 매우 쉽습니다.

jQuery를 사용하는 경우 serialize()를 사용합니다.그렇지 않은 경우 자바스크립트로 모든 폼 값 가져오기 게시글을 참조합니다.

var targetForm = $('#myForm');
var urlWithParams = targetForm.attr('action') + "?" + targetForm.serialize();
alert(urlWithParams);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="/search/"  id="myForm" method="get">
  <input name="param1" type="hidden" value="1">
  <input name="param2" type="hidden" value="some text">
</form>

javascript를 사용하여 생성할 수 있습니다.

<script>
function test(frm) {
  var elements = frm.elements;
  var url = "?";
  for(var i=0;i<elements.length;i++) {
    var element = elements[i];
    if (i > 0) url += "&";
    url += element.name;
    url += "=";
    if (element.getAttribute("type") == "checkbox") {
      url += element.checked;
    } else {
      url += element.value;
    }
  }
  console.log(url);
  return false;
}
</script>

<form onsubmit='return test(this);'>
<input name=field1 value='123'>
<input type=checkbox name=field2 checked>

<input type=submit>
</form>

언급URL : https://stackoverflow.com/questions/28333613/get-the-url-generated-from-a-form-on-submit-with-javascript