How to Create a jQuery Ajax Post with PHP
In this short tutorial, we are going to share with you how to create a jQuery Ajax post request with PHP.
Also, you can see how to post JSON data with jQuery easily and quickly.
After checking out this tutorial, you will be able to create ajax post requests much more easily. What you need is looking through the options below.
Let’s start to code.
jQuery Post Form Data with .Ajax() Method
Using the .ajax() method is one of the best solutions to the problem. Here is how you should act to create a jQuery post request with this method:
<!DOCTYPE html>
<html>
<head>
<title>jQuery post form data with .ajax() method by codeofaninja.com</title>
<style>
div {
margin: 10px;
}
</style>
</head>
<body>
<h1>jQuery post form data with the .ajax() method</h1>
<div>Filling out and submitting the form below to receive a response.</div>
<!-- our form -->
<form id="userForm" action="/form/submit" method="post">
<div>
<input type="text" name="firstname" placeholder="Firstname" />
</div>
<div>
<input type="text" name="lastname" placeholder="Lastname" />
</div>
<div>
<input type="email" name="email" placeholder="Email" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<!-- where the response will be displayed -->
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function() {
$('#userForm').submit(function() {
// showing that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will be passing the form data
* $(this).serialize() - for reading form data quickly
* function(data){... - data includes the response from post_receiver.php
*/
$.ajax({
type: 'POST',
url: 'post_receiver.php',
data: $(this).serialize()
})
.done(function(data) {
// demonstrate the response
$('#response').html(data);
})
.fail(function() {
// if posting your form failed
alert("Posting failed.");
});
// to restrain from refreshing the whole page, it
returns false;
});
});
</script>
</body>
</html>JQuery Post Form Data with .Post() Method
The .post method is considered a shorthand for the .ajax method. Its syntax is more descriptive. See how to use it correctly:
<!DOCTYPE html>
<html>
<head>
<title>jQuery post form data using .post() method by codeofaninja.com</title>
<style>
div {
margin: 15px;
}
</style>
</head>
<body>
<h1>jQuery post form data using .post() method</h1>
<div>Filling out and submitting the form below to receive a response.</div>
<!-- our form -->
<form id="userForm" action="/form/submit" method="post">
<div>
<input type="text" name="firstname" placeholder="Firstname" />
</div>
<div>
<input type="text" name="lastname" placeholder="Lastname" />
</div>
<div>
<input type="email" name="email" placeholder="Email" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<!-- where the response will be shown -->
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function() {
$('#userForm').submit(function() {
// showing that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will be passing the form data
* $(this).serialize() - for reading form data quickly
* function(data){... - data includes the response from post_receiver.php
*/
$.post('post_receiver.php', $(this).serialize(), function(data) {
// demonstrate the response
$('#response').html(data);
}).fail(function() {
//if posting your form fails
alert("Posting failed.");
});
// to restrain from refreshing the whole page, the page
returns false;
});
});
</script>
</body>
</html>jQuery Post JSON Data with .Post() Method
As an additional information, here, we provide you with an example on how to post JSON data. For that purpose, you need to generate a JSON string and post it as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery post JSON data using .post() method by codeofaninja.com</title>
</head>
<body>
<h1>jQuery post JSON data with .post() method</h1>
<div>Click the button below to receive a response.</div>
<!-- our form -->
<input type="button" value="Post JSON" id="postJson" />
<!-- where the response will be shown -->
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function() {
$('#postJson').click(function() {
// showing that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will be passing the form data
* $(this).serialize() - for reading form data easily
* function(data){... - data includes the response from post_receiver.php
*/
$.post('post_receiver.php', {
user_id: "143",
username: "ninjazhai",
website: "https://codeofaninja.com/"
}, function(data) {
// demonstrate the response
$('#response').html(data);
}).fail(function() {
// if posting your form failed
alert("Posting failed.");
});
// to restrain from refreshing the whole page page
returns false;
});
});
</script>
</body>
</html>Why to Use jQuery for Ajax Requests?
In this snippet, we represented to you several ways of making ajax post requests with jQuery. You may ask why to use it. The reason to use it in your practice is apparent: it provides you with the simplest, short and readable code.
About jQuery Ajax Get() and Post() Methods
These methods are used for requesting data from the server using HTTP get or post request.
They are mainly applied for implementing request and response between the client and the server.
Get is used for requesting data from a particular resource. Post is used for submitting data to be processed to a particular resource.