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

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?