How to Make an Ajax Call Without Jquery

Parallel AJAX request without jQuery

Use a method to make the request that will return a promise.

This could be simply using the fetch api or wrapping XMLHttpRequest with a promise.

Put the two promises in an array and pass it to Promise.all.

Promise.all([ fetch("http://example.com"), fetch("http://example.net") ])
    .then(array => console.log(array));

POST method to send form data with AJAX without JQUERY

Your first javascript will return error because the data object is not defined.

Try this one

        const contactForm = document.getElementById("contact-form");

            contactForm.addEventListener("submit", function(event) {
                
              event.preventDefault();
              
                var request = new XMLHttpRequest();
                var url = "/php/email-sender.php";
                request.open("POST", url, true);
                request.setRequestHeader("Content-Type", "application/json");
                request.onreadystatechange = function () {
                    if (request.readyState === 4 && request.status === 200) {
                        var jsonData = JSON.parse(request.response);
                        console.log(jsonData);
                    }
                };
                var name =  document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var subject = document.getElementById("subject").value;
                var message = document.getElementById("message").value;
                
                
                var data = JSON.stringify({"name": name, "email": email, "subject": subject, "message": message});
     
              
                request.send(data);
     
            });  

</script>

Check this thread on how to receive json POST:
Receive JSON POST with PHP

Then Try this to your PHP file

<?php
// Handling data in JSON format on the server-side using PHP
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
echo json_encode($v);
?>

To access the object in your PHP file, use

$v->name;
$v->email;
$v->subject;
$v->message;

SCREENSHOT:
Sample Image
https://s9.postimg.cc/w1fc8266n/2018-05-03_20h37_08.gif

Load PHP File Using Ajax (Without JQUery)

I was able to fix my own problem. I followed a tutorial online that suggested changing my vanilla <script> tag that contained my ajax code to instead read <script type="text/javascript" src="jquery.min.js">. This made my code not function properly.

To solve this, I changed my script tag back to the vanilla <script>, and instead put the following at the bottom of my <head>: <script type="text/javascript" src="jquery.min.js"></script>

This allowed my php code to be grabbed from ajax as expected.

How to Make an Ajax Call Without Jquery

Parallel AJAX request without jQuery

POST method to send form data with AJAX without JQUERY

Load PHP File Using Ajax (Without JQUery)

Related Topics

Leave a reply