Using Fetch with Wordpress Plugins Ajax

fetch_plugin.js

fetch(ajax_url, {
      method: 'POST',
      credentials: 'same-origin',
      headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'}),
      body: 'action=zget_profile_user'
    })
    .then((resp) => resp.json())
    .then(function(data) {
      if(data.status == "success"){
        _this.setState({loaded:true,user:data.user});
      }
    })
    .catch(function(error) {
      console.log(JSON.stringify(error));
    });

The kicker is credentials: 'same-origin'
This is required to send the wordpress cookies with it.

Interesting. Would be cool to build the fetch body as an object, like jQuery does with ajax in the data parameter:

  $.ajax({
    url:ajaxurl,
    type:'post',
    data:{
      x:x,
      y:y,
      z:z
    },
    success:function(data){
    }
  });

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);
     });

You can use an object directly in the body field with URLSearchParams too (no need to use FormData):

fetch(ajaxSettings.ajaxurl, {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Cache-Control': 'no-cache',
    },
    body: new URLSearchParams({
        action: 'make_appointment',
        post_title: 'hola como estas',
    })
}).then(response => response.json())
.then(response => console.log(response))
.catch(err => console.log(err));

Just pointing out for future Google searchers that you need to instantiate URLSearchParams (i.e. use the new operator)

body: new URLSearchParams({
    action: 'make_appointment',
    post_title: 'hola como estas',
})

👍 well spotted, I've updated the code above.

Hello!

Does anyone know how to handle the fetch Api after I have submit a Form, so I can display the information in the admin panel.

I have created some top level menus and submenus in the admin area. Also I used new FormData(myForm) and the submit informations were displaying in the Request . Now, I use the new URLSearchParams as I saw here, but I can't see the informations being displayed.

Hey @nikospapapetrou,

you could do something like this:

fetch(ajaxurl, opts)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // TODO: Do something with the `data` you fetched
  })
  .catch((error) => console.log(error));

Then, it's just DOM manipulation to populate a table, create a list element, or whatever you want to do with your data.

Yes, I have done something like that. First I used in the body: I wanted for the wordpress to submit from throught ajax-admin.php.

myForm.addEventListener('submit', (e) => {
  e.preventDefault();
  fetch( jsforwp_globals.ajax_url, {
    method: 'post',
    body: new URLSearchParams({
      action: 'photolensor_save_user_contact_form',
      _ajax_nonce: jsforwp_globals.photolensor_save_user_contact_form
    }),
    
  }).then(function (response) {
    return response.text();
  }).then(function (text) {
    console.log(text);
  });
  
});

But First I used inside the new URLSearchParams( new FormData(myForm)). And in the cosole in request I could see my data. But anyway thanks. May, it is more wordpress question. Thanks anyway.

This is killer! Thank you. I was able to modify this to download a PDF file from the server.

Is there any demo or code for GET REQUEST in ajax?