How to Post Data Using AJAX and PHP Tutorial

In this tutorial we learn how to post data using Ajax and PHP in a Simple Example.



Introduction

Ajax (Asynchronous JavaScript and XML) is a Technic that allow the web application to be updated asynchronously with data without load server side.

In this tutorial, we will submit a form by using Ajax. After Click the submit button, Ajax will post the data asynchronously. We can post any type of data like simple text field, Images, Files, Dropdown list etc. For that we will create a simple form and send the data by Ajax. PHP(Any backend script) is used to get post data in the server side.

Create a HTML Form

We will create a simple form in html. We need to define form Id. In the below form, form id is ‘myform’. We will use form id to get all input data by Ajax.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Validation</title>
    <!-- Latest compiled and minified BootStarp CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="page-wrapper" >
      <div class="container" >
        <h1>
          Send Post Data to AJAX
        </h1>
        <form name="myForm" class="form-horizontal" id ="myform" action="#"  
                 method="POST" enctype="multipart/form-datam">
          <div class="panel panel-info">
            <div class="panel-heading">Form</div>
            <div class="panel-body">
              <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="name" class="col-md-4">Name *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" id="name" name="name" 
                                placeholder="Enter Name" required/>
                      </div>
                    </div>
                    <div class="form-group" >
                      <label for="Mobile" class="col-md-4">Mobile *</label>
                      <div class="col-md-6">
                        <input type="text" class="form-control"  id="mobile" name="phone"
                                 placeholder="Enter Mobile Number" required/>
                      </div>
                    </div>
                    <div class="form-group  ">
                      <label for="email" class="col-md-4">Email </label>
                      <div class="col-md-6">
                        <input type="text" class="form-control" name="email" 
                             placeholder="Enter  Email" >
                      </div>
                    </div>
                     <div class="form-group  ">
                      <label for="image" class="col-md-4">Select Image </label>
                      <div class="col-md-6">
                        <input type="file" class="form-control" name="image" >
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
            <center>
              <input type="submit" class="btn btn-primary" value="Submit" />
            </center>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

send_post_from_ajax

Create Js Function

Now, We will create a method in the js file. This method is used to send POST data by using AJAX.

<script>
function submitForm() {
           
  var form_data = new FormData(document.getElementById("myform"));
  form_data.append("label", "WEBUPLOAD");
  $.ajax({
      url: "YOUR URL HERE",
      type: "POST",
      data: form_data,
      processData: false,  // tell jQuery not to process the data
      contentType: false   // tell jQuery not to set contentType
  }).done(function( data ) {
    console.log(data);
    //Perform ANy action after successfuly post data
      
  });
  return false;     
}
</script>

Call JS function on Click submit button

We will add onsubmit=”return submitForm();” in the <form> tag. When we add onsubmit in the form tag, then it will be call submitform() method after click on the submit form to send post data to server.

<form name="myForm" class="form-horizontal" id ="myform" action="#"  
        onsubmit="return submitForm();"method="POST" enctype="multipart/form-datam">

Get POST Request in the backend

We can use any back-end script to get post request but here we will use PHP.

<?php 
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$image = $_FILES['image'];
?>
The following two tabs change content below.
Abhay Anand has experience in the field of Software Development. He can program Android, PHP, JavaScript, Html, Css. He develops web and Android applications. You can reach him at anand.abhay1910@gmail.com