3

I'm developing a plugin with an ajax handler. I first coded the ajax request setting up the XHR object. Looks like this:

var data = new FormData();
data.append('post_title', 'Hola como');
data.append('action', 'make_appointment');

var xhr = new XMLHttpRequest();

xhr.addEventListener('readystatechange', function() {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open('POST', 'http://wpapi.localdev/wp-admin/admin-ajax.php');
xhr.setRequestHeader('Cache-Control', 'no-cache');

xhr.send(data);

As you can notice I'm passing the action as part of the form data. This works fine but I wanted to use the fetch API instead because why not.

So I converted that to this:

let form = new FormData();
form.append('action', 'make_appointment');
form.append('post_title', 'hola como estas');

fetch(ajaxSettings.ajaxurl, {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data',
    'Cache-Control': 'no-cache'
  },
  body: form
})
  .then(response => {
    console.log(response);
    return response.text();
  })
  .then(response => {
    console.log(response);
  });

And this is not working, it just throws an 400 bad request error. I know that for some reason, the action parameter is not being sent correctly. Though, it works if, instead of sending the action as form data, I send it as a url parameter like this:

fetch(ajaxSettings.ajaxurl, {
  method: 'POST',
  headers: {
   'Content-Type': 'application/x-www-form-urlencoded',
   'Cache-Control': 'no-cache'
  },
  body: '?action=make_appointment'
})

What am I doing wrong here? I just want to make it work as the XHR request, i.e. sending the action as form data. Notice that the ajax handler on the WordPress side already exists and works correctly.

  • Have you found any working solution? – Suraj Khanal Jan 20 at 14:01
0

To make a working HTTP request with fetch API you have to do something like this.

const form = new FormData();
form.append('action', 'make_appointment');
form.append('post_title', 'hola como estas');
const params = new URLSearchParams(form);

fetch(ajaxSettings.ajaxurl, {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
       'Cache-Control': 'no-cache',
      },
      body: params
    }).then(response => {
       return response.json();
    })
    .then(response => {
       // read data here
       console.log(response);
     }).catch(err => { 
       console.log(err);
     });
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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