Quick Reach
jQuery Post Method
The jQuery post method ($.post(url)) loads data from the server using HTTP request. As mentioned in the jQuery $.ajax chapter, this is a short form of $.ajax method.
See post example with text file
The URL part is where a page or file name e.g. text file may be specified. The URL may be a .php or .aspx or another file that communicates with a database to return database’s data. This data can be displayed in the web document to the specified HTML elements.
The jQuery ajax post syntax below shows how URL / server location will be specified along with the sent data and managing returned data as per HTTP request.
See post example with PHP file
Both of these examples are explained below!
How to use the post jQuery method
Following is the syntax of ajax post method:
$.post( url, [data], [callback function], [type] )
Where
URL is a string, specifying a server to which request is sent. This is a required parameter of post method.
data: post data to send to the server along with HTTP request. For example, data to be used to query user id/password from the database server. For which, the script may be written in the specified URL. This is an optional parameter of post method.
callback function: Optional parameter. If a request is successful in post method, this function will execute if given. It also contains returned data from the server. The other parameters in this call function are:
Callbackfunction(data, status, xhr)
Where
- Data = returned data from the server.
- Status = returns request status i.e. success, error, timeout, notmodified.
- xhr= it contains XMLHttpRequest object. In a case of Internet Explorer, it defaults to ActiveXObject. Otherwise XMLHttpRequest.
- dataType: It specifies the type of returned data from the server to a callback function. The returned data in post function may be in these forms: text, HTML, script, XML, JSON, JSONP.
jQuery ajax post example
Following example shows how to use the post method in jQuery. The simple ajax post example loads a text file by using post method which is placed in the same directory as the source file that calls it. After loading, as the button is clicked, it will display loaded data from the text file to postrequest Div.
See demo by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#loaddata”).click(function(){
$.post(“ajaxexample.txt”,function(ajaxresult){
$(“#postrequest”).html(ajaxresult);
});
});
});
</script>
</head>
<body>
<div>Click button to load AJAX returned data</div>
<div id=“postrequest”></div>
<button id=“loaddata”>Load data for postrequest Div</button>
</body>
</html>
|
A $.post() with PHP file example
The following example uses two text boxes to send data. The text boxes are name and location. After entering the text and clicking the button, the values will be assigned to the variables in jQuery.
As you click the button, the jQuery $.post method will call URL= post_test.php file. This will receive sent parameters and returns the output string.
Post_test.php file is placed at same location as our HTML file where $.post() method is used.
The returned data will be shown in a div element if the jQuery AJAX post call is successful. See the example online by clicking the link below:
Experience this example online
First post_test.php code
|
1
2
3
4
5
6
7
8
9
|
<?php
$post_name=$_REQUEST[“name”];
$post_location=$_REQUEST[“location”];
if( $post_name )
{
echo “Name entered is: “. $post_name .“<br>”;
echo “Location:” .$post_location;
}
?>
|
HTML file using jQuery post method
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#loaddata”).click(function(){
txtname=$(“#txtinput”).val();
txtlocation=$(“#txtlocation”).val();
$.post(“post_test.php”,{ name:txtname, location: txtlocation },function(ajaxresult){
$(“#postrequest”).html(ajaxresult);
});
});
});
</script>
</head>
<body>
<div id=“postrequest”></div>
Enter Name: <input type=“text” id=“txtinput”><br />
Enter Location: <input type=“text” id=“txtlocation”><br />
<button id=“loaddata”>Click to send request to post_test.php</button>
</body>
</html>
|
Useful Reading: jQuery $.AJAX
Leave A Comment?