Join Morten Rand-Hendriksen for an in-depth discussion in this video Set up REST API request through AJAX, part of WordPress: REST API.
- [Instructor] Now we get to the fun stuff. Using the information we have right now, we can run a function when the previous post button is clicked that grabs the data ID, which you'll remember is the ID for the previous post, then combines that ID with the rest_url to create a URL resource request for the API and then put that URL into an Ajax function to get the data from the ReST API and output it into the browser console. All of this starts by tracking a click on the load-previous anchor.
I'm going to wrap that in its own function so that it can call it back later, and I'll explain why in one second. So first, I'll set up a new function called previous_post_trigger, and inside this function, I'll grab the link, load-previous a, then on click, I'll run a separate function called get_previous_post. Now, why would I want to place this trigger in its own function? There's a simple explanation.
That URL needs to consist of the rest_url itself, then slash, posts, and then we need the ID for the previous post, and that ID sits in the data ID property on the link we just clicked. So, we'll start by grabbing that item, var previous_post_ID. I'll set that equal to dollar sign, then we'll grab this, which is the current click item, attribute, and here, I'm looking for the data ID attribute.
That will give us the data ID attribute of a link that was just clicked. Then we'll set up a new variable, call it json_url. Inside this variable, we'll take the rest_url, which we already have, plus, then we'll put in posts/, plus, and then previous_post_ID. This gives us the complete URL to pass to the ReST API to give us the resource back. Then we have to run Ajax on this URL, so I'll set up a new Ajax function.
Here, we're looking for a json data type, and the URL is this json_url we just created. Here, I'll use the pseudo-promise structure of jQuery Ajax, and we'll start with done. That means everything worked the way it was supposed to. If everything worked, we'll set up a pseudo function that grabs the object. That would be the object that's being returned by Ajax, and for now, we'll just dump that object out into the console log so we can take a look at it.
If, on the other hand, something goes wrong, fail, we'll set up an anonymous function that just console logs error, and finally, I'll set up an always condition that runs regardless of what happens, and here, I'll put out console.log.('AJAX complete'), just to tell myself that everything is finished. Close everything with a semicolon, save, and now, we can go back to the browser, open my inspector, reload the page, make sure I have the current active code, then open the console and click the link.
If everything works correctly, I should now get an object in my console log, and we can take a look at that object, and here you see this is the output from the ReST API. So here, we have the post itself. We have the date, the date_get, and we have the ID and the link and the meta and the modified and everything here is in alphabetical order. That's why it's structured differently from what you're used to. But this is the exact same object that we would get if we did that call in Postman. That means everything is working. Now, if this is the first time that you've seen Ajax, I'm sure you're going, woah, woah, woah, slow down.
Then, we run an Ajax script that asks for a json data type at the URL, json_url that we just created. If everything succeeds, we get an object back, and then we just return that object in the console log so we can see it. That's what you saw. If something goes wrong, we just get a message in the console that says error, and once everything is done we get a console log message that says Ajax complete. What you see here is that everything worked properly. We get the object that has all the data from the previous post, and then we get Ajax complete, and finally, an error caused by something that has nothing to do with what we were doing.
All of this means everything is working properly. Ajax is getting the data we need from the ReST API, and the only thing we have to do now is take that data object we got returned from the ReST API, wrap some of it in some fancy HTML, and then output it in the browser.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses