jQuery Post Method

Introduction

This article demonstrates how to use the jQuery post() method to load a page from the server using a POST HTTP request.

Syntax

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

Parameters

• url: String containing the URL to which the request has to be sent.
• data: data is an optional parameter representing the return value from the function being called from the server/destination page.
• callback: This is again an optional parameter, can be used upon successful data loading.
• type: ddd

jQuery with ASP.Net

Here we will understand and see various techniques to use jQuery post() using ASP.Net

Approach 1

$.post("Default.aspx");

The preceding code snippet requests the "Default.aspx" page but ignores the other parameters.

Approach 2

$.post("Default.aspx", { request_type: "POST", operation: "Select" } );

The preceding code snippet requests "Default.aspx" along with some data sent to the requested page i.e request_type and operation.

Approach 3

$.post("Default.aspx", function(data){
alert(data + "Modified Successfully");
});

The preceding code snippet displays the data in a popup fashion, as the data is passed from the requested page to the function (data).

Approach 4

XML Return:

$.post("Default.aspx", function(data){ alert(data + "Modified Successfully"); },"xml");

JSON Return:

$.post("Default.aspx", function(data){ alert(data + "Modified Successfully"); },"json");

The last parameter in the code snipped marked as Bold "xml" is the type of data returned to the callback function. Valid values are xml, HTML, script, json and text.

Now we will see how we can implement the jQuery post in ASP.Net.

The following screenshot shows the actual implementation of the .post() method where the "Default.aspx" page is being called and data is sent back from the server to jQuery for further processing.



In case the pictorial view is not clear, the attached code will help you for a better understanding.

Step 1

On $(document).ready(function()) the click event is bound to the HTML control.

Step 2

While binding the event, .post() is also associated with the click event, so as soon as the user clicks the button, the server post() will occur and the requested page is "Default.aspx" and some extra data is also being passed with the request like the "operation" type so that in "Default.aspx.cs" ____.

And using Request.Form["operation"] we can access the value and can perform the operation if required as per application demands.

For e.g.. in the following code snippet if the operation is select then we will try to get some data, whereas the fillusers() method fills the data in the combobox.

Code Snippet

try { if (Request.Form["operation"].Equals("Select"))       {            fillUsers();       } } catch { }

Summary

In this article, we discussed how we can use a jQuery post() method to load a page from the server and using HTML controls it's quite possible to do autopostback without making controls "runat=server".

Thanks for reading. Please provide your valuable inputs and suggestion.