php ajax post – jQuery AJAX Post Example with PHP and JSON

php ajax post: jQuery ajax POST example with PHP – Learn how to use and implement Jquery for submitting AJAX form in your PHP web app development project with Jquery Ajax post example.

php ajax post – ajax send data to php

first of all Create an HTML form and then Include the jQuery library after that Write a script for ajax call as well as Handle POST data in PHP file.

jQuery AJAX Post Example with PHP and JSON

you can also pass form serialize ajax data to post method with php. here jQuery.ajax( settings ) for a fully list of all settings.

Basic Ajax POST request

$.ajax({
	 type: "POST",
	 url: 'demo.php',
	 data: {name: 'virat'},
	 success: function(data){
	 	console.log(data);
	 },
	 error: function(xhr, status, error){
	 	console.error(xhr);
	 }
});

POSTED DATA

<?php
echo "<pre>";
    print_r($_POST);
echo "</pre>";
?>

Don’t Miss : ajax send data to php

JQUERY POST FORM DATA USING .AJAX() METHOD

index.html

<html>
    <head>
        <title>jQuery post form data using .ajax() method by pakainfo.com</title>
          
    </head>
<body>
  
<h4>jQuery post form data using .ajax() method</h4>
<div>Fill out and submit the form below to get display_output.</div>
<form id='memberForm'>
    <div><input type='text' name='member_nm' placeholder='Member Name' /></div>
    <div><input type='text' name='account_nm' placeholder='Account Name' /></div>
    <div><input type='text' name='email' placeholder='Email' /></div>
    <div><input type='submit' value='Submit' /></div>
</form>
  
<div id='display_output'></div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
    $('#memberForm').submit(function(){

        $('#display_output').html("<b>Loading Output...</b>");
          
        $.ajax({
            type: 'POST',
            url: 'do_action.php', 
            data: $(this).serialize()
        })
        .done(function(data){
              
            $('#display_output').html(data);
              
        })
        .fail(function() {
         
            alert( "Posting failed." );
              
        });
  
        return false;
  
    });
});
</script>
  
</body>
</html>

USING .POST() METHOD

<html>
    <head>
        <title>jQuery post form data using .post() method by pakainfo.com</title>
          
    </head>
<body>
  
<h4>jQuery post form data using .post() method</h4>
<div>Fill out and submit the form below to get display_output.</div>
  
<form id='memberForm'>
    <div><input type='text' name='member_nm' placeholder='Member Name' /></div>
    <div><input type='text' name='account_nm' placeholder='Account Name' /></div>
    <div><input type='text' name='email' placeholder='Email Address' /></div>
    <div><input type='submit' value='Submit' /></div>
</form>
 
<div id='display_output'></div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
    $('#memberForm').submit(function(){
      
        $('#display_output').html("<b>Loading response...</b>");
          
        $.post('do_action.php', $(this).serialize(), function(data){
              
            $('#display_output').html(data);
              
        }).fail(function() {
          
            alert( "Sorry, Posting failed." );
              
        });
  
        return false;
  
    });
});
</script>
  
</body>
</html>

Php jquery ajax post request example

index.php

<!DOCTYPE html>
<html>
<head>
	<title>Php Ajax Form Validation Example - www.pakainfo.com</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>


<div class="container">
  <h2>Php Ajax Form Validation Example</h2>
  <form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="dsp">
    <div class="alert alert-danger display-error" style="display: none">
    </div>
    <div class="form-group">
      <div class="controls">
        <input type="text" id="name" class="form-control" placeholder="Name">
      </div>
    </div>
    <div class="form-group">
      <div class="controls">
        <input type="email" class="email form-control" id="email" placeholder="Email Address" >
      </div>
    </div>
    <div class="form-group">
      <div class="controls">
        <input type="text" id="job_title" class="form-control" placeholder="Job title" >
      </div>
    </div>
    <div class="form-group">
      <div class="controls">
        <textarea id="comments" rows="7" placeholder="Write your Comments" class="form-control"></textarea>
      </div>  
    </div>
    <button type="submit" id="submit" class="btn btn-success"><i class="fa fa-check"></i> Send Message</button>
  </form>
</div>


</body>


<script type="text/javascript">
  $(document).ready(function() {


      $('#submit').click(function(e){
        e.preventDefault();


        var name = $("#name").val();
        var email = $("#email").val();
        var job_title = $("#job_title").val();
        var comments = $("#comments").val();


        $.ajax({
            type: "POST",
            url: "/do_save.php",
            dataType: "json",
            data: {name:name, email:email, job_title:job_title, comments:comments},
            success : function(data){
                if (data.code == "200"){
                    alert("Success: " +data.msg);
                } else {
                    $(".display-error").html("<ul>"+data.msg+"</ul>");
                    $(".display-error").css("display","block");
                }
            }
        });


      });
  });
</script>
</html>

do_save.php

<?php


$displayErrNotify = "";


if (empty($_POST["name"])) {
    $displayErrNotify = "<li>Name is required</<li>";
} else {
    $name = $_POST["name"];
}


if (empty($_POST["email"])) {
    $displayErrNotify .= "<li>Email is required</li>";
} else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
    $displayErrNotify .= "<li>Invalid email format</li>";
}else {
    $email = $_POST["email"];
}


if (empty($_POST["job_title"])) {
    $displayErrNotify .= "<li>Job Title is required</li>";
} else {
    $job_title = $_POST["job_title"];
}


if (empty($_POST["comments"])) {
    $displayErrNotify .= "<li>Comments is required</li>";
} else {
    $comments = $_POST["comments"];
}


if(empty($displayErrNotify)){
	$msg = "Name: ".$name.", Email: ".$email.", Job Title : ".$job_title.", Comments:".$comments;
	echo json_encode(['code'=>200, 'msg'=>$msg]);
	exit;
}


echo json_encode(['code'=>404, 'msg'=>$displayErrNotify]);


?>

I hope you get an idea about ajax post php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.