Sending json via ajax in wordpress using Vanilla JS

Question

I am sending a json in my server using vanilla JS and it returns a bad request, it seems the server only wants a key value pair like 'page=pageData&action=act', when i do this it works, but i would want to send data that way. Is there a way to make it possible? When i try to make it in jquery it works fine.

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

This is my code in 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);
      }
    });
});

I looked at the network tab in chrome and i saw that the send request becomes a key value pair like 'page=pageData&action=act'. I am stuck in this part because i want to make a vanilla js ajax request in my project. Any idea would be much appreaciated. Many thanks!

Whats say in cosole log??

metalbox
– metalbox

2019-05-02 18:58:47 +00:00
Commented May 2, 2019 at 18:58 — metalbox
– metalbox, Commented May 2, 2019 at 18:58

Chris Ferdinandi · Accepted Answer · 2019-05-02 18:48:28Z

1

You want to serialize your object data. Here's a helper function you can pass your object into:

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

answered May 2, 2019 at 18:48

Chris Ferdinandi

1,9624 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sending json via ajax in wordpress using Vanilla JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related