Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



jQuery Post Method

Syntax of jQuery post()

$.post( url, [data], [callback_function], [type] )

Where

URL:  It is a string specifying server to which request is sent. This is a required parameter.

data: Data to send to the serve along with HTTP request. Example: data to be used to query userid/password from database server. Script of which might be written in specified URL. This is an optional parameter.

callback function: Optional parameter. If the request is successful this function will execute if given. It also contains returned data from the server. Other parameters in this call function are:

Callbackfunction(data, status, xhr)

Where

Data = returned data from server

Status = This returns request status i.e. success, timeout, error, notmodified

xhr= contains XMLHttpRequest object. In case of IE (Internet Explorer) it defaults to ActiveXObject. Otherwise it is XMLHttpRequest.

dataType: Specifies the type of returned data from server to callback function. Returned data may be in following forms:  text, html, script, xml, json, jsonp.

$.post()

The simple example given below loads a text file by using $.post function placed in same directory as source file that calls it. After loading as the button is clicked it will display loaded data from text file to postrequest Div.


<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>
$.post() with PHP file to make AJAX Request

In example given below, we will use text box entered data. Entered text in location and name boxes will be assigned to the variables in jQuery. After the button is clicked $.post() method will call URL= post_test.php file. This will receive the sent parameters, location and name and return a output string. All will be done without reloading/refreshing page.

Post_test.php file is placed at same location as HTML file where $.post() method is used.

If the AJAX call is successful the callback function will display returned data into "postrequest" Div.

First post_test.php code


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

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


Related Videos