在没有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);
});

当我将标头设置为JSON xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); 我得到空的$_REQUEST变量。 看来WP无法理解此标头，或者我做错了什么。

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

使用此标头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不会将标头设置为application/json而是将标头设置为application/x-www-form-urlencoded并且所有此请求都将生成为具有标准标头的简单XMLHttpRequest ，并转换为xhr.send(data)字符串，像这样的"action=my_user_vote&post_id=1&nonce=2b2eaea6d3" ？

而且我不需要将标头设置为application/json并使用带有标准标头的简单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);