프로그래밍 언어/HTML,CSS,JS

form을 다른 페이지로 제출하는 방법

Rateye 2021. 12. 10. 10:25
728x90
반응형
질문 : 양식 제출과 같은 JavaScript 게시 요청

브라우저를 다른 페이지로 지정하려고합니다. GET 요청을 원하면 다음과 같이 말할 수 있습니다.

document.location.href = 'http://example.com/q=a';

그러나 액세스하려는 리소스는 POST 요청을 사용하지 않으면 제대로 응답하지 않습니다. 이것이 동적으로 생성되지 않은 경우 HTML을 사용할 수 있습니다.

<form action="http://example.com/" method="POST">
  <input type="hidden" name="q" value="a">
</form>

그런 다음 DOM에서 양식을 제출합니다.

하지만 정말로 저는 제가 말할 수있는 JavaScript 코드를 원합니다.

post_to_url('http://example.com/', {'q':'a'});

최고의 크로스 브라우저 구현은 무엇입니까?

편집하다

명확하지 않아서 죄송합니다. 양식을 제출하는 것처럼 브라우저의 위치를 변경하는 솔루션이 필요합니다. 이것이 XMLHttpRequest 에서 가능하다면 분명하지 않습니다. 그리고 이것은 비동기 적이거나 XML을 사용해서는 안되므로 Ajax가 답이 아닙니다.

답변

양식에 <input>을 동적으로 만들어 제출합니다.

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

예:

post('/contact/', {name: 'Johnny Bravo'});
                                                               

편집 : 이것이 너무 많이 upvoted했기 때문에 사람들이 이것을 많이 복사하여 붙여 넣을 것이라고 생각합니다. 그래서 부주의 한 버그를 수정하기 위해 hasOwnProperty 검사를 추가했습니다.

출처 : https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit
728x90
반응형