Skip to content

All topics  /  jQuery

JQuery Ajax Post Example PHP

jQuery ·

When “JQuery Ajax Post Example PHP” moves through design, development and browser testing, the official walkthrough can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

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...

More on this topic