javascript - 使用 Vanilla JS 在 wordpress 中通过 ajax 发送 json

Question

我正在使用 vanilla JS 在我的服务器中发送一个 json，它返回一个错误的请求，似乎服务器只需要一个键值对，如“page=pageData&action=act”，当我这样做时它可以工作，但我想发送数据那样。有没有办法让它成为可能？当我尝试在 jquery 中制作它时，它工作正常。

$('.more-headlines').on('click', function() {
  var pageData = $(this).data('page');
  var pageURL = $(this).data('url');
  var act = 'load_more';
  var jsondata = {
    page : pageData,
    action : act
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', pageURL, true);
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xhr.onload = function() {
    if (xhr.status >=200 && xhr.status < 400) {
      var data = JSON.parse(xhr.responseText);
      console.log(data);
    } else {
      console.log('sad');
    }
  };
  xhr.send(JSON.stringify(jsondata));
});

这是我在 jquery 中的代码

$('.more-headlines').on('click', function () {
    var that = $(this);
        pageData = $(this).data('page');
        newPage = pageData+1;
        pageURL = $(this).data('url');
        act = 'load_more';
        that.addClass('icon-spin');
        that.find('span').html('loading headline');
        jsondata = {
          page : pageData,
          action : act
        }
    $.ajax ({
      type: 'POST',
      url: pageURL,
      data: jsondata,
      success: function(response) {
        setTimeout( function () {

          that.data('page', newPage);
          $('#featureOnDemand ul').append(response);
          that.removeClass('icon-spin');
          that.find('span').html('See more headlines');

        }, 500);
      }
    });
});

我查看了 chrome 中的网络选项卡，我看到发送请求变成了一个键值对，例如“page=pageData&action=act”。我被困在这部分是因为我想在我的项目中发出一个 vanilla js ajax 请求。任何想法都会非常感激。非常感谢！

标签： javascriptjsonajaxwordpress

Answer 1

您想要序列化您的对象数据。这是一个帮助函数，您可以将对象传递到：

var serializeObject = function (obj) {
    var serialized = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            serialized.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
        }
    }
    return serialized.join('&');
};