使用Vanilla JS在Wordpress中通过Ajax发送json

时间:2019-02-27 04:39:03

标签: javascript json ajax wordpress

我正在使用香草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”之类的键值对。 我被困在这部分是因为我想在我的项目中提出一个普通的js ajax请求。任何想法都将不胜感激。非常感谢!

1 个答案:

答案 0 :(得分:0)

您要序列化对象数据。这是一个帮助函数,您可以将您的对象传递给:

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('&');
};