首页 >web前端 >js教程 >如何在 JavaScript 中使用 XMLHttpRequest 发送 POST 数据?

如何在 JavaScript 中使用 XMLHttpRequest 发送 POST 数据?

Barbara Streisand
Barbara Streisand原创
2024-12-19 05:43:08118浏览

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”变量中的请求参数的字符串。

以上是如何在 JavaScript 中使用 XMLHttpRequest 发送 POST 数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn