如何将嵌套的JSON对象转换为URL查询字符串以通过AJAX传递?

时间:2018-05-26 13:27:12

标签: javascript ajax xmlhttprequest query-string

我正在尝试使用JavaScript(没有jQuery)编写Ajax请求并且与this tutorial相关,我现在有这个功能:

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

        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open('POST', url);
        xhr.onreadystatechange = function() {
            if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
        };
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(params);
        return xhr;
    }

我可以使用JSON格式发送数据:

postAjax(MY_SERVER_URL, { p1: 1, p2: 'Hello World' }, function(data){ console.log(data); });

在服务器上,我只有print_r($_POST),然后输出为:

Array
(
    [p1] => 1
    [p2] => Hello World
)

但是当我有一个嵌套的JSON时,它会显示[object Object]作为输出而不是我的JSON中的每个数组和对象。例如:

postAjax(url, { p1: 1, p2: {'test_name':'Hello World'} }, function(data){ console.log(data); });

输出:

Array
(
    [p1] => 1
    [p2] => [object Object]
)

是否可以指导我如何将嵌套的JSON转换为通过AJAX传递的URL查询字符串?

更新

请注意,我可以使用JSON.stringify将整个嵌套的JSON转换为字符串并将其传递给服务器,但是您可能知道,如果我使用某些库(如jQuery),您可以将嵌套的JSON发送到服务器,您不需要解码服务器上的字符串。这个问题的正是一些像jQuery这样的库如何将数据传递给服务器,你可以直接获得它而无需任何解码?

1 个答案:

答案 0 :(得分:0)

你可以通过双向

来解决这个问题
  1. 您需要将嵌套数据作为字符串

    发送

    postAjax(url, { p1: 1, p2: JSON.stringify({ 'test_name': 'Hello World' }) }, function(data) { console.log(data); });

  2. 将完整数据作为字符串传递

  3. 检查此https://stackoverflow.com/a/39519299/6236938