1

Been looking for some help changing a jQuery.ajax() request into vanilla XMLHttpRequest for WordPress, but not really finding what I want. Can anyone help me reformat the below into vanilla JavaScript XMLHttpRequest?

$.ajax({
    data: {
        'action': 'work_hour_form_handler',
        'work_hours_start': document.getElementById('work-hours--start').value,
        'work_hours_end': document.getElementById('work-hours--end').value,
        'break-hours_start': document.getElementById('break-hours--start').value,
        'break-hours_duration': document.getElementById('break-hours--duration').value,
        'working_days': document.getElementById('working-days').value
    },
    headers: {},
    method: 'post',
    url: fpm_ajax.ajax_url
}).done(function (data) {
    // If successful
    console.log(data);
}).fail(function (jqXHR, textStatus, errorThrown) {
    // If fail
    console.log(textStatus + ': ' + errorThrown);
});
1
  • heads up the url: fpm_ajax.ajax_url comes from wp_localize_script( 'feelya_pm_scripts', 'fpm_ajax', [ 'ajax_url' => admin_url( 'admin-ajax.php' ) ] ); Jul 28, 2017 at 9:14

1 Answer 1

8

Here's my take on it, although a bit late, but I am working on converting all jQuery.ajax() calls to vanilla JavaScript, so why not.

    // alpha JS request // no jQuery
    // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send#Example_POST
    // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
    var request = new XMLHttpRequest();

    request.open('POST', fpm_ajax.ajax_url, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
    request.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            // If successful
            console.log(this.response);
        } else {
            // If fail
            console.log(this.response);
        }
    };
    request.onerror = function() {
        // Connection error
    };
    request.send('action=work_hour_form_handler&work_hours_start=' + document.getElementById('work-hours--start').value + '&work_hours_end=' + document.getElementById('work-hours--end').value);
    //

Note that by using console.log(this) you can see the actual response and any thrown errors. Also note I haven't included all your data, only the first two.

This code comes from a working solution from my WordPress plugin. I wrote about in more detail here: How to replace jQuery.ajax() with vanilla JavaScript in WordPress.

Enjoy!

5
  • 1
    yes! dude nice, quick question though - does the onload function work in a similar way to .done() in a normal jQuery ajax request? Apr 25, 2018 at 8:16
  • Yes, it does work similar. And onerror works similar to fail().
    – Ciprian
    Apr 25, 2018 at 10:00
  • Can you help me out here? wordpress.stackexchange.com/q/359762/52859 Feb 29, 2020 at 17:14
  • 1
    I tried but fetch api, but that did not worked, now this code works like a charm, now i do not have to include jQuery on frontend, I'm making requests without jQuery now. Jun 24, 2021 at 17:42
  • True, no need for jQuery.
    – Ciprian
    Jun 24, 2021 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.