Saving AJAX Results to a URL with Query Parameters

We’ve previously talked about WordPress and AJAX – aka Asynchronous JavaScript and XML – which allows websites to communicate with their server asynchronously and update content seamlessly without having to reload the page.

You’ve certainly seen this before; think about a website where, when you submit a form, the results are displayed without taking you to a new page or refreshing the page you’re on.

One of the drawbacks of implementing AJAX is that, because the content is updated dynamically, it’s not possible to link directly to the results of a query. That means you can’t easily share the URL of a page where you’ve filtered the content using AJAX.

For example, say you’re shopping for shirts, and the website uses AJAX to let you filter based on color and size. If you select “Red” under color and “Medium” under size, then the website will update and display all red, medium-sized shirts. But if you want to share a direct link to those results, you can’t just copy and paste the URL – that will take you back to the original results where every color and size is shown.

In order to link to the filtered results, we’ll need to add query parameters to the URL. Query parameters are a set of key-value pairs added to the end of a URL that provide additional information to the web server about the content of a page and the actions that have been taken.

Adding Query Parameters to the URL

To add the query parameters to the URL, we’ll utilize the submit() method for the form, which is fired when a form is submitted.

$('.products-filter').submit(function(e) {
    e.preventDefault(); 
    var currFilters = currForm.serializeArray(),
    currUrlParams = '?';
    $(currFilters).each(function(i, field){
        if (field.value && field.value != '' ) {
            currUrlParams += field.name + '=' + field.value + '&';
        }
    });
    window.history.replaceState(null, null, currUrlParams);
    $.ajax({
// Make AJAX Call
    });
});

In the above jQuery, we use the submit() method for the form and prevent the default action for the form.

Then, we use the jQuery serializeArray() method to create an array of objects that contain name-value pairs for the form fields and assign it to the currFilters variable. We also initialize a currUrlParams variable and give it a value of “?”, as URL query parameters always start with a question mark. Then, we loop through the currFilters object, which contains all the form fields, and check if the value exists for a form field.

If it passes the check, we append the field name=value to the currUrlParams variable and add an “&”, as different key-value pairs in URL query parameters are separated by an ampersand. After we’ve looped through all of the form fields, we use the replaceState() method of the browser’s history interface to add the query parameters to the URL.

Once the above jQuery has been added, every time the form is submitted, the URL will update with the query parameters – indicating what selections are made in the form.

Updating AJAX Results Based On Query Parameters

While the above code will add the query parameters to the URL – i.e. https://www.example.com/products?color=red&size=medium – we still need to update the template to check for those parameters and, if they exist, display the correctly filtered results.

If you’re working in PHP, you can use the $_GET variable to grab the data stored in the query parameters. In your template, add the following code to access the query parameters.

$color = isset($_GET['color']) && ! empty($_GET['color']) ? $_GET['color'] : false;
$size = isset($_GET['size']) && ! empty($_GET['size']) ? $_GET['size'] : false;

This code uses the PHP ternary operator to check if the “color” or “size” URL parameters exist, and if they do and are not empty, assign their values to their respective variables. Otherwise, we assign the value “false” to them.

Now in the template, we can add a check to see if these parameters exist and, if they do, update the query for the products accordingly.

By adding just a few lines of code, we can give users the ability to link to queried results while still keeping the AJAX functionality. If you need help implementing such functionality or for any other digital marketing needs, reach out to us.