javascript對象無法使用Vanilla Ajax在PHP頁面上正確發布到$ _POST

Question

我已經在Internet和stackoverflow主題中搜索了答案，但沒有找到任何答案。 我知道JQuery可以很好地發送對象，但是當我嘗試在沒有框架的情況下執行同樣的操作時，我的帖子將不會進入PHP頁面。

我的基本2個基本功能是：

function sendAjax(){
    let car = {type:"Fiat", model:"500", color:"white"};
    var myURL = "ajaxpost.php"; 
    var post_data = {
        myData: car
    };
    ajax(myURL, post_data); 
}

function ajax(url, post_data) {
    var params = typeof data == 'string' ? post_data : Object.keys(post_data).map(
        function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(post_data[k]) }
    ).join('&');

    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onload = function(){
        if(this.status == 200){
            document.write(this.responseText);
        } 
    }
    xhr.send(params);
}   

我在ajaxpost.php的PHP頁面包含以下內容

<?php
    $data= $_POST['myData'];
    $results = print_r($data, true);
    echo $results;  // just gives me [object Object]

?>

Answer 1

這是因為post_data.myData是一個對象而不是一個字符串，因此它是通過encodeURIComponent編碼為[Object object] 。

如果您對使用www/form-data編碼一無所知，則需要一個使用遞歸來正確轉義復雜對象的所有屬性和子屬性的函數。

建議使用jQuery遠非我本意，但是它有一個方便的功能$.param(obj) 。

否則，您可以只使用JSON：

var jsonString = JSON.encode(complexObject);

編輯：自此以來，我需要實現此功能，所以我不妨在這里分享它：

/**
 * Pack up an object of parameters into something that can be added to a GET
 * request.
 *
 * Example:
 * encodeParams({ 'foo': 'bar', 'baz': 'qux' })
 * -> "foo=bar&baz=qux"
 * @param { [key: string]: any } params - key-value store of string->anything
 * @return string URL encoded parameters
 */
var encodeParams = function (params) {
    var up = new URLSearchParams;
    var addParam = function (prefix, param) {
        if (param instanceof Array) {
            for (var _i = 0, param_1 = param; _i < param_1.length; _i++) {
                var i = param_1[_i];
                addParam(prefix + "[]", i);
            }
        }
        else if (param instanceof Object) {
            // add like associative array,
            // e.g. foo[bar][]=baz&foo[bar][]=qux
            for (var i in param) {
                if (param.hasOwnProperty(i)) {
                    addParam(prefix + "[" + i + "]", param[i]);
                }
            }
        }
        else {
            up.append(prefix, (param == null ? '' : param));
        }
    };
    for (var p in params) {
        if (params.hasOwnProperty(p)) {
            addParam(p, params[p]);
        }
    }
    return up.toString();
}; // end encodeParams()