11-Apr-2023
.
Admin
Hi guys,
In this example, i will learn you how to pass ajax post data example with jquery php. You can simply form submit with pass ajax post data and get return all data with success.
It allows you to fetch content from the back-end without a page refresh. I will give you very simple example of ajax post request with php. you can also write server side validation using php.
You will send data one page to another page without page refresh then you can use bellow example.
index.php
<!DOCTYPE html>
<html>
<head>
<title>jquery ajax post example php</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header text-center bg-success">
<h2 class="text-white"><strong>JQuery Ajax Post Example PHP</strong></h2>
</div>
<div class="card-body">
<div class="alert alert-danger display-error" style="display: none"></div>
<form method="post" id="contactForm">
<div class="form-group">
<label>Name :</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label>Email :</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label>Message :</label>
<textarea class="form-control" rows="3" id="msg"></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-success" id="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function (e) {
e.preventDefault();
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
var msg = $('#msg').val();
$.ajax({
type: "POST",
url: "/process.php",
dataType: "json",
data: {name:name, email:email, msg:msg,},
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>
</body>
</html>
process.php
<?php
$errorMSG = "";
/* NAME */
if (empty($_POST["name"])) {
$errorMSG = "<li>Name is required</li>";
} else {
$name = $_POST["name"];
}
/* EMAIL */
if (empty($_POST["email"])) {
$errorMSG .= "<li>Email is required</li>";
} else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
$errorMSG .= "<li>Invalid email format</li>";
}else {
$email = $_POST["email"];
}
/* MESSAGE */
if (empty($_POST["msg"])) {
$errorMSG .= "<li>Message is required</li>";
} else {
$msg = $_POST["msg"];
}
if(empty($errorMSG)){
$msg = "Name: ".$name.", Email: ".$email.", Message:".$msg;
echo json_encode(['code'=>200, 'msg'=>$msg]);
exit;
}
echo json_encode(['code'=>404, 'msg'=>$errorMSG]);
?>
It will help you...
#PHP
#Jquery
