javascript - 在没有 jQuery.ajax 的情况下在 WordPress 的 XMLHttpRequest 中发送 JSON 的正确方法

Question

我正在尝试在 WordPress 中使用 XMLHttpRequest 发送 JSON 数据:

document.getElementById("user_vote").addEventListener("click", function(event) {
    event.preventDefault();

    //action to handle in WP add_action("wp_ajax_my_user_vote", "my_user_vote");
    let action = "my_user_vote";
    let url = myAjax.ajaxurl;

    let data = {
        action: action,
        post_id : this.dataset.post_id,
        nonce: this.dataset.nonce
    };

    let json = JSON.stringify(data);

    let xhr = new XMLHttpRequest();

    xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');

    xhr.onreadystatechange = function() {
        if (this.readyState != 4) return;

        document.getElementById('response').innerHTML = this.responseText;
    }

    xhr.send(json);
});

当我将 header 设置为 JSON xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); 我变得空了 $_REQUEST变量。似乎 WP 不理解这个标题或者我做错了什么。

我看到了这个post .当我在 admin-ajax.php 中检查 $input = file_get_contents('php://input'); 时，它返回我的数据字符串:{"action":"my_user_vote","post_id":"1","nonce":"2b2eaea6d3"} 但 $_REQUEST 变量为空。

使用此 header xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 一切正常，但我想发送 JSON。

为什么我可以使用 jQuery.ajax 简单地将 JSON 数据发送到 admin-ajax.php 而不能使用 javascript 来完成？

加1

以下是在 WP 中发送 AJAX 的正确方法:

jQuery.ajax({
    type : "post",
    dataType : "json",
    url : myAjax.ajaxurl,
    data : {action: "my_user_vote", post_id : post_id, nonce: nonce},
    success: function(response) {
        //do stuff
    }
})

你的意思是在这种情况下 jQuery 不会将 header 设置为 application/json 但会将它们设置为 application/x-www-form-urlencoded 和所有这些请求将生成带有标准 header 的简单 XMLHttpRequest 并将 xhr.send(data) 转换为字符串，类似于这样的 "action=my_user_vote&post_id=1&nonce=2b2eaea6d3"?

而且我不需要将 header 设置为 application/json 并使用带有标准 header 的简单 POST 请求？

Answer 1

PHP 不会自动解码 JSON 并将其放入 $_POST 或 $_REQUEST。

正如您已经发现的那样，您需要从 STDIN 读取原始 HTTP 请求正文并显式解析它以读取 PHP 中的 JSON 格式请求。

---

您的问题似乎是对 jQuery 功能的误解。可能当您使用 jQuery 时，您正在做这样的事情:

var data = { some: "object" };
jQuery.ajax({
    url: "foo",
    data: data,
    method: "POST"
});

当您这样做时，jQuery 会对 data 对象进行 URL 编码。它不会对其进行 JSON 编码。

请记住，虽然 JSON 语法受到 JavaScript 字面量语法的启发，但在 JavaScript 源代码中使用对象字面量的结果将为您提供对象而不是 JSON 字符串。

如果您使用 jQuery 来发出 JSON 格式的请求，您将需要这样的东西:

jQuery.ajax({
    url: "foo",
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    method: "POST"
});

---

要使用 XHR 将您的对象编码为表单数据，您可能需要以下内容:

var data = { some: "object" };
var array = [];
Object.keys(data).forEach(element => 
    array.push( 
        encodeURIComponent(element) + "=" + encodeURIComponent(data[element])
    )
);
var body = array.join("&");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(body);