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