如何格式化数据以发送格式如 jQuery 请求的 vanilla XHR答案

【问题标题】：How to format data to send vanilla XHR formated like jQuery request如何格式化数据以发送格式如 jQuery 请求的 vanilla XHR
【发布时间】：2021-09-20 00:19:12
【问题描述】：

我有一个 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 对象和字符串的基本概念，但我完全不明白我应该做什么。

【问题讨论】：

标签： javascript jquery xmlhttprequest

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在 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 文档所述

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

然后您将发送请求以正文作为参数

http.send(参数);

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

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

【讨论】：