>웹 프론트엔드 >JS 튜토리얼 >XMLHttpRequest를 사용하여 JavaScript로 POST 데이터를 보내려면 어떻게 해야 합니까?

XMLHttpRequest를 사용하여 JavaScript로 POST 데이터를 보내려면 어떻게 해야 합니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-19 05:43:08106검색

How Can I Use XMLHttpRequest to Send POST Data in JavaScript?

XMLHttpRequest를 사용한 POST 데이터 전송

JavaScript에서 XMLHttpRequest 객체는 서버에 비동기적으로 데이터를 보내는 방법을 제공합니다. 이는 페이지를 다시 로드하지 않고 양식 데이터를 전송할 때 유용할 수 있습니다.

양식 제출을 XMLHttpRequest로 변환

다음 HTML 양식을 고려하세요.

<form name="inputform" action="somewhere" method="post">
  <input type="hidden" value="person" name="user">
  <input type="hidden" value="password" name="pwd">
  <input type="hidden" value="place" name="organization">
  <input type="hidden" value="key" name="requiredkey">
</form>

XMLHttpRequest를 사용하여 동일한 기능을 달성하려면 다음을 작성할 수 있습니다. code:

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

이 코드는 지정된 URL에 대한 POST 요청을 열고 필요한 헤더 정보를 설정한 후 매개변수를 보냅니다. 전송해야 하는 데이터를 포함하도록 'params' 변수를 수정할 수 있습니다.

객체-매개변수 변환

보내고 싶은 객체가 있는 경우 매개변수로 다음 코드를 사용하여 URL로 인코딩된 키/값 쌍의 배열로 변환할 수 있습니다.

var params = new Object();
params.myparam1 = myval1;
params.myparam2 = myval2;

let urlEncodedData = "", urlEncodedDataPairs = [], name;
for( name in params ) {
    urlEncodedDataPairs.push(encodeURIComponent(name)+'='+encodeURIComponent(params[name]));
}

이렇게 하면 문자열이 생성됩니다. 이는 XMLHttpRequest 호출의 'params' 변수에서 요청 매개변수로 사용될 수 있습니다.

위 내용은 XMLHttpRequest를 사용하여 JavaScript로 POST 데이터를 보내려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.