JavaScript를 사용하여 POST 요청을 동적으로 제출하는 방법은 무엇입니까?

동적 양식을 만들고 POST 요청에 제출

JavaScript에서는 POST 요청을 사용하여 서버에 데이터를 보내야 하는 경우가 많습니다. 그러나 리소스가 적절한 응답을 위해 양식 제출을 요구하는 경우 양식 제출을 동적으로 시뮬레이션하는 방법이 필요합니다.

XMLHttpRequest 사용

XMLHttpRequest는 비동기 HTTP 요청. 그러나 기본적으로 양식 데이터를 처리하도록 설계되지 않았기 때문에 양식 제출에는 적합하지 않습니다.

동적으로 입력 요소 생성

크로스 브라우저 솔루션에는 입력 요소를 동적으로 생성하는 작업이 포함됩니다. 양식에 추가합니다. 그런 다음 이 양식을 프로그래밍 방식으로 제출할 수 있습니다.

/**
 * 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') {
  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 요청을 보낼 수 있습니다.

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

위 내용은 JavaScript를 사용하여 POST 요청을 동적으로 제출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!