Post
Ask Question

Introduction to JQuery: Part IX


In previous article, we discussed few JQuery's AJAX functions. In this article, we will cover other functions $.post(), $.load() and $.serialize(). $.load() will helps us to load data from server and place the returned HTML into specified element. It works on both GET and POST requests. If you pass data as an object in load(), it will use POST else GET. I am going to use same JQueryGetSample solution in this article also. It syntax:
 
.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
 
Here,
  • 1st parameter: URL to which request need to be sent.
  • 2nd parameter: data that need to be sent to server along with request.
  • 3rd parameter: function that need to be called if request completes.
I added a sample HTML page called myLoad.htm to the solution and called load() as shown below:

<script type="text/javascript">
      $(function() {
           $('#title').load("../../myLoad.htm", null, function() {
   alert("Completed");
      });
      });
</script>

This will load myLoad.htm into title div tag. This .load() function is similar to .get() , except that .load() on success will set the HTML contents to the returned result for matching elements. 
 
Now, we will look into serialize(). Serialize() will help us to create a JSON format for HTML form elements having name property for those. We can create a string with this format:
 
Control-name1:value1& Control-name2:value2......

<script type="text/javascript">
        $(function() {
            alert($('form').serialize());
        });
</script> 

The above script will serialize all form elements like textbox, textarea etc having name property and shows them in JSON format.
 
We can use .parseJSON() to get a javascript object from well formed JSON string a shown below:

<script type="text/javascript">
        $(function() {
              var myObj = $.parseJSON('{"name":"test","id":"123","sal":"4500"}');
            alert(myObj.name + "," + myObj.id + "," + myObj.sal);
        });
</script>

We will move over to post(). $.post() loads data from the server using HTTP POST request. Its syntax:
 
$.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )
 
Here,
  • 1st parameter: URL to which request need to be sent.
  • 2nd parameter: data that need to be sent to server along with request.
  • 3rd parameter: function that need to be called if request succeeds.
  • 4th parameter: Type of data returned from the server.
Pages fetched using post() will not be cached. I added getdata() to account controller as shown below:

[HttpPost]
public JsonResult GetData(string firstName,string lastName)
{
    var name = new { fullName = (firstName + lastName) };
    return Json(name);
}

And called it using $.post() as shown below with datatype expected as json:

<script type="text/javascript">
        $(function() {
 $.post('account/getdata', { firstname: "AAA", lastname: "BBB" }, function(data) { alert(data.fullName);
 },"json");
});
</script>
 
The other overloaded functions for $.post() are:
  • $.post('test.aspx') : Requests the page and ignores the result.
  • $.post('test.aspx', {name: test, id: 1234}) : Requests the page along with sending some data in JSON format.
  • $.post('test.aspx',null,function(){//callback..},"xml") : Requests the page and callback on success and data type expected as xml.
I am ending the things here. In next article, we will cover $.ajax() and its supporting functions. I hope this article will be helpful for all.


Similar Articles