How to send Ajax request and get Ajax response in PHP

by

In this post I am going to tell how can we send ajax request in PHP and how can we get ajax response in PHP. In this example we shall create a form and this might have fields such as name, email, phone and message when this form submits the data will be set to PHP file and that PHP file will send a response of ajax with formatted message so following are the steps which required to make this program.

Step 1:

Need to create a form by which we can send ajax request to PHP file and this PHP file will return a response so following is the code of form.

<form action="#" class="form-group" autocomplete="off">
                        
                        <div class="form-group mb-3">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Name" required>
                        </div>
                        <div class="form-group mb-3">
                            <input type="email" name="email" class="form-control" id="email" placeholder="Email" required>
                        </div>
                        <div class="form-group mb-3">
                            <input type="text" name="phone" class="form-control" id="phone" placeholder="Phone Number" required>
                        </div>
                        
                        <div class="form-group mb-3">
                            <textarea name="message" id="message" cols="30" rows="5" class="form-control" placeholder="Message"></textarea>
                        </div>
                        <div class="text-end">
                            <button type="button" class="btn btn-primary" onclick="check();">Submit</button>
                         <div id="result" style="text-align:left;"></div>   
                        </div>
   </form>

In above form code there are few important stuff such as button and form, You need to give type of button as button so that javascript function can be called onclick event and in form action you don’t need to give any thing except #.

Step 2:

Now, need to create JavaScript script in which we can use AJAX as well so following is the code of javascript

<script>
       function check()
       {
           var name=document.getElementById("name").value;
           var email=document.getElementById("email").value;
           var phone=document.getElementById("phone").value;
           var message=document.getElementById("message").value;
           

           $.ajax({
            type: 'POST',
            url: 'pro.php',
            data: { name: name, email: email,phone: phone, message: message },
            success: function(response) {
                $('#result').html(response);
                
                if(response=='go')
                {
                    alert(response);
                
                }
                }
            });
       
           
       }
   </script>

By using document.getElementById("name").value;, I am using values of all fields of input.getElementById() function is used to get the value of particular input field but to get the value of a particular fiedl you need to specify that field’s id such as input type="text" id="name" .
After getting values of input fields i need to use $.ajax() and also need to pass data with post method.In the success: function(response) section we are receiving response if request is successful. By $('#result').html(response); , I am also printing the response sent by PHP file pro.php, We can also check the response as per condition such as if(response=='go').

Step 3:

Following is the PHP file called pro.php. This files is used to manage the request sent by ajax and this is also used to send response.

<?php

$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$message=$_POST['message'];

echo "<h4>Your Dertails !</h4>";
echo "<b>Name</b> : ".$name."<br/><b>E-mail</b> : ".$email."<br/><b>Phone</b> : ".$phone."<br/><b>Message</b> : ".$message;



?>

In above code we are getting data by using $_POST[] and by echo it is printing the message and this message will be passed as response to the ajax and this response will be printed on $('#result').html(response);.

Leave a Comment