JQuery Ajax Post Example PHP

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Today now in this example, i will show you how to pass ajax post data by using jquery php. So we can do simply form submit also with pass ajax post data and can get return all data also with success.

Here it allows us to fetch content from the back-end without any page refresh. So here I will give you very simple example of ajax post request also with php. Now we can also write server side validation by using php.

So we will send data one page to another page without any page refresh then we can just 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]);

?>

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →