如何格式化数据以发送格式化为 jQuery 请求的普通 XHR

Question

我有一个 POST XHRequest 可以在 jQuery 中按预期工作，但在 vanilla JS 中不行。

因为我正在尝试学习 JS 的所有内部工作原理，所以我想使用尽可能多的原始代码。我知道 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、You Might Not Need jQuery 等中找到的其他选项，但请求永远不像 jQuery 那样。我显然不了解JS对象和字符串的基本概念，但我完全不明白我应该做什么。

Answer 1

在 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', url, true);

第三个参数是使请求异步，如 mdn 文档所述

An optional Boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send() method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown.

然后您将发送带有正文作为参数的请求

http.send(params);

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

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

Answer 2

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);

如何格式化数据以发送格式化为 jQuery 请求的普通 XHR

How to format data to send vanilla XHR formated like jQuery request

javascript

jquery

xmlhttprequest