Step 1 Create an index.php file

<form action="" class="form_registration" method="post">
  <input type="text" name="first_name" value="" placeholder="first_name" />
  <input type="text" name="last_name" value="" placeholder="last_name" />
  <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <input type="submit" name="submit" value="Insert"  />
</form>

<div class="result">
 
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function()
{
  $(".form_registration").submit(function()
  {
    var data = {"action": "test"};
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "response.php",
      data: data,
      success: function(data) {
        $(".result").html(
          "First name: " + data["first_name"] + "<br />last Name: " + data["last_name"] + 
           "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
        );

        
      }
    });
    return false;
  });
});
</script>

Step 2 create php server file to return data in json format

<?php
if (is_ajax()) 
{
  if (isset($_POST["action"]) && !empty($_POST["action"])) 
  {
      $action = $_POST["action"];
      switch($action) 
      {
          case "test": test_function(); 
              break;
      }
  }
}

function is_ajax() 
{
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
           strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test_function()
{
  $return = $_POST;
  $return["json"] = json_encode($return);
  echo json_encode($return);
}
?>                    
                

Comment