Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Ajax Post to PHP File XMLHttpRequest Object Return Data Tutorial

Published :
Author :
Adam Khoury
Learn to program the javascript XMLHttpRequest Object to easily send post method Ajax HTTP requests to your PHP parsing scripts, and get return data from submitted forms or any type of interaction that takes place on your website. We establish the request object and simply access the events, methods, and properties we need for two way Javascript and PHP communication. my_parse_file.php <?php echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file'; ?> example.html <html> <head> <script> function ajax_post(){ // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var url = "my_parse_file.php"; var fn = document.getElementById("first_name").value; var ln = document.getElementById("last_name").value; var vars = "firstname="+fn+"&lastname="+ln; hr.open("POST", url, true); // Set content type header information for sending url encoded variables in the request hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var return_data = hr.responseText; document.getElementById("status").innerHTML = return_data; } } // Send the data to PHP now... and wait for response to update the status div hr.send(vars); // Actually execute the request document.getElementById("status").innerHTML = "processing..."; } </script> </head> <body> <h2>Ajax Post to PHP and Get Return Data</h2> First Name: <input id="first_name" name="first_name" type="text"> <br><br> Last Name: <input id="last_name" name="last_name" type="text"> <br><br> <input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();"> <br><br> <div id="status"></div> </body> </html>