Ajax In Jquery

  

1)Ajax and Jquery

   Below is the simple example of how to do ajax call in jquery. Below example can be used for  both GET and POST requests by changing type to GET or Post .


var requestParams = {

      name:'James Bond',

      id  :'007'

};

//below param method take cares of special characters in data

requestParams = jQuery.param(requestParams);

$.ajax({

  type : 'GET',//GET Or POST 

  url  : "details.html",

  cache: false, //get fresh copy of details.html instead of cahced one

  data :requestParams,

 

  success: function(response, textStatus, jqXHR){

        //set data in div

        $("#detailsDiv").html(response);

  },

  // callback handler that will be called on error

  error: function(jqXHR, textStatus, errorThrown){

      // log the error to the console

      console.log(

          "The following error occured: "+

          textStatus, errorThrown

      );

  }

 

});

2) Other Simple way for Ajax  GET using JQuery .load()

var params = {    id:'007',

                  name:'James Bond'

            };

 //jquery param method returns serialized parameters

 //(it takes cares of special characters )

var url ="/loadDetails?"+jQuery.param(params);;

//load the details in detailsDiv.

 $("#detailsDiv").load(url, function(response, status, xhr) {

      if (status == "error") {

          var msg = "Sorry but there was an error getting details ! ";

          $("#detailsDiv").html(msg + xhr.status + " " + xhr.statusText);

      }

});