-
-
Save cwhittl/015827973d23ce657bfe09c735c9fa98 to your computer and use it in GitHub Desktop.
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)); | |
}); |
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?
Interesting. Would be cool to build the fetch
body
as an object, like jQuery does with ajax in thedata
parameter: