Sending POST data with AJAX in JavaScript

It's really easy to make a POST request through AJAX using JavaScript and then attach some data to send with that. This technique can be used to communicate with your server without refreshing the page and even feed it some useful information.

In this video I take you through a simple example of how this works by first setting up the request in JavaScript and then coding a simple PHP script which will do a basic manipulation of the POST variables. From there, we display the server response to the browser.

For your reference, check this out:

0:00 Overview
0:35 Creating XHR Object
0:52 Handling the response
2:08 Sending the request
4:46 Verifying that it works
5:48 Wrapping up

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #webdev

[dcode-software]

I've also made a video on sending JSON in similar fashion, check it out below!

[scheroone]

finally someone who does it without jquery, thanks a lot

[zizilatif]

OMG you explained this so well, I am using AJAX for the first time.... this really made a lot of sense! thanks.

[Samwankins]

Easy, nice, planned, and clear explanation. Well done pro!

[marineoutsource]

I've included this in all my playlist just to make sure I will not lose this tutorial :)

[fastgeorge]

Everybody where saying jQuery was way easier than vanilla js but this video was so clear and easy to understand. Thanks!!

[Rennaa]

Simple and understandable, thank you!

[mayankmaurya]

Thank you so much, this was very helpful. I was having trouble doing this, It's 4:00am and I was really struggling thank you so much.

[sideshowlol]

Very helpful. Thank you. To bring this up-to-date, it's better to use xhr.responseType to set the data format and then xhr.response instead of the older xhr.responseText.

[FlyingwithStan]

outstanding - thank you. you don't need to use jquery if you were just going to use it for AJAX. this video walks through exactly how to use normal javascript to do AJAX. thank you!

[markg]

Thank you very much, its been a great help :)

[chrisrockscode]

I swear if this just helped me with y project, you got a subscriber

[mukeshroy]

Only you provide Ajax post request without using jquery. Thanks a lot...

[GSBroker]

Awesome! I love it how you use plain javascript instead of 'that' outdated library. A suggestion: could you make a video on how to include csrf tokens in the XMLHttpRequest header and how to avoid CORS errors? I was trying to send POST request to a rest api I quickly made with django rest framework but I'm having trouble circumventing csrf and cors protection.

[stevee]

Oh man, that is the best sounding keyboard on all of youtube!

[peterkim]

What if the php file was uploaded to another website will the post request work?

[ramodsasanga]

Thank you very much. I can't understand how you decide the header name("Content-Type") and the in setRequestHeader() method.

[butchiki]

how did you setup vscode for web development? what extensions are you using?

[senju]

I've tried it and it works. Thank you so much. What materials or books did you read to be able to understand this yourself? And how long did it take you?

[shupesmerga]

this is so much fuking better than other tutorials out there that GETs data from an arbitrary .txt file or some magical JSON file that pops up out of no where.