如何格式化数据以发送像 jQuery 请求一样格式化的 vanilla XHR

如何解决如何格式化数据以发送像 jQuery 请求一样格式化的 vanilla XHR

我有一个 POST XHRequest，它可以在 jQuery 中正常工作，但在 vanilla JS 中却没有。

因为我正在尝试学习 JS 的所有内部工作原理，所以我想使用尽可能多的 vanilla 代码。我知道 Fetch API，但我对这一切真的很陌生，并且真的想更好地理解。所以，这是我目前面临的问题（一个多星期以来）：

我有这个有效的代码：


    let packg = {
        schema: 'string',table: 'anotherString'
    };
    
    const packgJSON = JSON.stringify(packg);

    $.ajax({
        type: 'POST',url: 'PHP/get_data.PHP',data: {'content': packgJSON}
    });

这是 Firefox 开发者工具中的结果，与我的 PHP 文件完美配合：

当我尝试编写 vanilla JS 时，像这样：


    const xhr = new XMLHttpRequest();

    xhr.open('POST','PHP/get_data.PHP',true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');

    let packg = {
        schema: 'string',table: 'anotherString'
    };

    const packgJSON = JSON.stringify(packg);

    xhr.send({'content': packgJSON});

这是我得到的结果：

我不明白我应该如何格式化 .send() 内容以便像 jQuery 请求一样格式化。我尝试了在 MDN、W3Schools、你可能不需要 jQuery 等中找到的其他选项，但请求永远不像 jQuery 那样。我显然没有理解 JS 对象和字符串的基本概念，但我根本不明白我应该做什么。

解决方法

XMLHttpRequest.send 不像 jQuery ajax 那样将普通对象作为参数。
但是，您可以使用该对象创建一个 URLSearchParams 对象并将其传递给 send

const xhr = new XMLHttpRequest();

xhr.open('POST','php/get_data.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');

let packg = {
    schema: 'string',table: 'anotherString'
};

const packgJSON = JSON.stringify(packg);
var data = new URLSearchParams({'content': packgJSON})
xhr.send(data);

在 vanilla js 中，您的请求看起来像这样

var http = new XMLHttpRequest();
var url = '/api/endpoint';
var params = 'orem=ipsum&name=binny' // Or your json;
http.open('POST',url,true);

//Send the proper header information along with the request
http.setRequestHeader('Content-type','application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

首先创建一个新的 XMLHTTPREQUEST，然后打开请求并提供方法和 url

http.open('POST',true);

第三个参数是使请求异步，因为 mdn 文档提到

一个可选的布尔参数，默认为true，表示是否或不异步执行操作。如果这个值是 false，send() 方法直到响应被返回已收到。如果为 true，则提供已完成交易的通知使用事件监听器。如果 multipart 属性是 true，否则会抛出异常。

然后你将发送请求体作为参数

http.send(params);

并且您使用这些事件侦听器侦听请求中的更改和响应

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}