Sending WordPress object via AJAX with pure Javascript

Question

I'm working in WordPress and I'm trying to replace my jQuery functions with pure javascript. However, the ajax calls are giving me problems. Here is my successful jQuery and my unsuccessful JavaScript:

Original JQuery

jQuery.ajax({
  url: locals.ajax_url,
  method: 'post',
  context: this,
  data: {
    action: 'get_more_posts',
    page: page,
    loop: typeof loop !== 'undefined' ? loop : locals.wp_query
  }
});

New JavaScript

var req = new XMLHttpRequest();
req.open('POST', locals.ajax_url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var l = typeof loop !== 'undefined' ? loop: locals.wp_query;
var s = 'action=get_more_posts&page=' + page + '&loop=' + encodeURIComponent(JSON.stringify(l));
req.send(s);

The jQuery works, but the javascript isn't handling the the loop variable correctly (variable "l").

The jQuery sends an HTTP request with something like this:

action=get_more_posts&page=2&loop%5Bquery%5D%5Bpage%5D=&loop%5Bquery%5D%5Bpagename%5D=blog&loop%5Bquery_vars%5D%5Bpage%5D=0&loop%5Bquery_vars%5D%5Bpagename%5D=blog&loop%5Bquery_vars%5D%5Berror%5

But the javascript version sends something like this:

action=get_more_posts&page=2&loop=%7B%22query%22%3A%7B%22page%22%3A%22%22%2C%22pagename%22%3A%22blog%22%7D%2C%22query_vars%22%3A%7B%22page%22%3A0%2C%22pagename%22%3A%22blog%22%2C%22error

So the jQuery is sending square brackets while the javascript is sending squiggly brackets (amongst other things).

I know there are several approaches to fixing this, but I can't quite get any of them to work. I would love to change the request header to "application/json", but then I can't get wordpress to recognize the other variables (action, page). Otherwise, I just need the loop variable to encode/decode correctly.

Here's the variable if that helps:

<script>var loop = <?= json_encode($loop); ?>;</script>

Here's the php function if that helps (works with the jQuery version):

function get_more_posts() {
  $args = $_REQUEST['loop']['query'];
  $args['paged'] = $_REQUEST['page'];
  $loop = new WP_Query($args);
  ...
}

Not sure if I need to make changes in php or javascript, but the answers can't involve any external libraries, and keep in mind I'm working with WordPress. Let me know if you need any more information. Thanks in advance.

My ajax is a little rusty, but shouldn't your request be a 'GET' instead of a 'POST' if you're sending a query string? — Greg Burkett
– Greg Burkett, Commented Jul 3, 2017 at 3:00
So that I don't have to load the jquery library? What does it matter? — Rice_Crisp
– Rice_Crisp, Commented Jul 3, 2017 at 15:26

Rice_Crisp · Accepted Answer · 2017-07-03 16:07:05Z

2

Figured it out. I wasn't parsing the request correctly. I needed to add stripslashes, and then I was missing the second argument for json_decode to return arrays instead of objects.

function get_more_posts() {
  $loop = json_decode(stripslashes($_REQUEST['loop']), true);
  $args = $loop['query'];
  $args['paged'] = $_REQUEST['page'];
  $loop = new WP_Query($args);
  ...
}

Hope this helps if anyone else attempts something similar.

answered Jul 3, 2017 at 16:07

Rice_Crisp

1,2611 gold badge16 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Sending WordPress object via AJAX with pure Javascript

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