Today, We want to share with you jQuery AJAX POST using PHP Tutorial .In this post we will show you ajax post to php and get return data, hear for jquery ajax post json response example we will give you demo and example for implement.In this post, we will learn about Jquery Ajax Post Example For Submitting AJAX Forms in PHP with an example.
jQuery AJAX POST using PHP Tutorial
There are the Following The simple About jQuery AJAX POST using PHP Tutorial Full Information With Example and source code.
As I will cover this Post with live Working example to develop jQuery AJAX Post Example with PHP and JSON, so the some major files and Directory structures for this example is following below.
Step 1: HTML Part Client Side Jquery Ajax REQUEST
index.html
<!DOCTYPE html> <html> <head> <title>Simple jQuery Php Ajax Form Validation Example with Demo</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 lstpage"> <h1>Simple Php Ajax Form Validation Example</h1> <b>jquery ajax post data example php</b> <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="form-controls"> <input type="text" id="name" class="form-control" placeholder="Your Good Name"> </div> </div> <div class="form-group"> <div class="form-controls"> <input type="email" class="email form-control" id="email" placeholder="Your USER Email" > </div> </div> <div class="form-group"> <div class="form-controls"> <input type="text" id="email_subject" class="form-control" placeholder="Your Subject" > </div> </div> <div class="form-group"> <div class="form-controls"> <textarea id="comments" rows="10" placeholder="Your Comments" class="form-control"></textarea> </div> </div> <button type="submit" id="submit" class="btn btn-success"><i class="fa fa-check"></i> Send Commnets</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 email_subject = $("#email_subject").val(); var comments = $("#comments").val(); $.ajax({ type: "POST", url: "/submit_products.php", dataType: "json", data: {name:name, email:email, email_subject:email_subject, comments:comments}, success : function(data){ if (data.code == "200"){ alert("Success: " +data.fullMessage); } else { $(".display-error").html("<ul>"+data.fullMessage+"</ul>"); $(".display-error").css("display","block"); } } }); }); }); </script> </html>
Serever Side PHP Source Code
submit_products.php
<?php $commentsErrors = ""; if (empty($_POST["name"])) { $commentsErrors = "<li>Your User Name is required</<li>"; } else { $name = $_POST["name"]; } if (empty($_POST["email"])) { $commentsErrors .= "<li>Your User Email is required</li>"; } else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) { $commentsErrors .= "<li>Sorry, Your Email - Invalid email format</li>"; }else { $email = $_POST["email"]; } if (empty($_POST["email_subject"])) { $commentsErrors .= "<li>Your User Subject is required</li>"; } else { $email_subject = $_POST["email_subject"]; } if (empty($_POST["comments"])) { $commentsErrors .= "<li>Your User Comments is required</li>"; } else { $comments = $_POST["comments"]; } if(empty($commentsErrors)){ $fullMessage = "Name: ".$name.", Email: ".$email.", Subject: ".$email_subject.", Message:".$comments; echo json_encode(['code'=>200, 'fullMessage'=>$fullMessage]); exit; } echo json_encode(['code'=>404, 'fullMessage'=>$commentsErrors]); ?>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about jQuery AJAX Post Example with PHP and JSON.
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.