jquery ajax in php – How to Use AJAX in PHP and jQuery?

jquery ajax in php – jQuery Ajax is the powerful tool of jQuery. Simple Ajax request example with JQuery and PHP.you can learn To Create Ajax Login Form It Takes Only Four Steps:-

jquery ajax in php – AJAX and PHP Example

we will learn with you how to write simple step by step ajax request example with jquery php source code. jQuery provides a $.ajax() function that serves as a shorthand for browser functionality to send asynchronous requests to a server.

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">
  <h1>Php Ajax Form Validation Example</h1>
  <form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake">
    <div class="alert alert-danger display-error" style="display: none">
    </div>
    <div class="form-group">
      <div class="frmctrl">
        <input type="text" id="name" class="form-control" placeholder="Name">
      </div>
    </div>
    <div class="form-group">
      <div class="frmctrl">
        <input type="email" class="email form-control" id="email" placeholder="Email" >
      </div>
    </div>
    <div class="form-group">
      <div class="frmctrl">
        <input type="text" id="comnt" class="form-control" placeholder="Subject" >
      </div>
    </div>
    <div class="form-group">
      <div class="frmctrl">
        <textarea id="message" rows="7" placeholder="Massage" 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 comnt = $("#comnt").val();
        var message = $("#message").val();


        $.ajax({
            type: "POST",
            url: "/doAction.php",
            dataType: "json",
            data: {name:name, email:email, comnt:comnt, message:message},
            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>

doAction.php

<?php

$getErrMessage = "";

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

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

/* Main SUBJECT */
if (empty($_POST["comnt"])) {
    $getErrMessage .= "<li>Subject is required</li>";
} else {
    $comnt = $_POST["comnt"];
}

/* MESSAGE */
if (empty($_POST["message"])) {
    $getErrMessage .= "<li>Message is required</li>";
} else {
    $message = $_POST["message"];
}

if(empty($getErrMessage)){
	$msg = "Name: ".$name.", Email: ".$email.", Subject: ".$comnt.", Message:".$message;
	echo json_encode(['code'=>200, 'msg'=>$msg]);
	exit;
}

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

?>

Don’t Miss : Pagination With JQuery Ajax PHP And MySQL

Also Read This ๐Ÿ‘‰   Get data attribute value JavaScript - How to Get the data-id Attribute of an Element Using jQuery?

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