jquery for AJAX Applications

Just started to learn jquery, documenting some of the ways jquery uses AJAX applications.

① uses the load () method to request data asynchronously:
Use the load () method to load data from the server via an AJAX request and place the returned data in the specified element
, its invocation format is: Load (Url,[data],[callback]), where the parameter URL is the load server address, you can
The option data parameter is the callback function that is executed after the data request is sent at the time the callback parameter is successful.

$ (function  () {   $ (function  () {     var $ this = $ (this );      $ ("ul")      . Load ("URL",function() {        $this. attr (" Disabled "," true ");    });

The

② uses the Getjson () method to asynchronously load JSON-formatted data
using the Getjson () method to obtain an array from the server by means of an AJAX asynchronous request, and to parse the retrieved data
, which is displayed in the page with the following format:
Jquery.getjson (Url,[data],[callback]) or $.getjson (Url,[data],[callback])
where the URL parameter is the server address for the request to load the JSON-formatted file, The optional data parameter is the callback function that is executed when the data request is sent at the time of the
, callback parameter is successful.

$ (function  () {  $ (function  () {  var $ this = $ (this );    $.getjson ("url",function// Gets the URL of the data file returned by the       $ this. attr (" Disabled "," true ");        function // AA is the name of the data (array type)         $ ("ul"). Append ("<li>" + aa["name"] + "</li>");   });});

③ asynchronously loads and executes the JS file using the Getscript () method
Use the Getscript () method to asynchronously request and execute a JavaScript-formatted file in the server, which is called in a format such as
Shown below: Jquery.getscript (Url,[callback]) or $.getscript (Url,[callback])
Where the parameter URL is the server request address, the optional callback parameter is the callback function that executes after the request succeeds.

$ (function() {  $ (function  () {    var $ this = $ (this );    $.getscript ("URL",function() {       $this. attr ("Disabled", "true");    });  });});

④ get data from the server using the Get () method
when using the Get () method, a Get method is used to request data from the server, and the data of the request
is returned through the parameters of the callback function in the method, and its invocation format is as follows: $.get (url,[ Callback])
where the parameter URL is the server request address, the optional callback parameter is the callback function that executes after the request succeeds.

$ (function() {   $ (function  () {      var $ this = $ (this );      $.get ("URL",function(data) {        $this. attr ("Disabled", "true");        $ ("ul"). Append ("<li> My Name:" + data.name + "</li>");      },//  JSON for data format    });});

⑤ using the Post () method to send data from the server in post
Compared to the Get () method, the post () method is used to send data to the server in post, after the server receives the data
, processing, and returning the processing results to the page, called in the following format: $.post (Url,[data],[callback])
Where the parameter URL is the server request address, the option data is sent to the server when requested, the optional callback
parameter is the callback function that executes after the request succeeds.

$ (function() {   $ (function  () {   $.post ("URL",      {num: $ ("# Txtnumber "). Val ()},//object with {}, passed to URL num,num as defined in the URL method of the variable      function  (data) {        $ ("ul"). Append ("<li> you enter <b>" + $ ("#txtNumber"). Val () + "</b> is <b>"        + Data + " (</b></li> ");});   } );

⑥ serialization of form element values using the Serialize () method
Use the Serialize () method to serialize element values in the form that have the name attribute, generating a standard URL encoding text
This string, directly available for the AJAX request, has the following invocation format: $ (selector). Serialize ()
Where the selector parameter is the element in one or more forms or the form element itself.

$ (function  () {   $(function  () {      $ ("#litest"). HTML ($ ("form"). Serialize ());   } );

When the "BTN" button is clicked, the Serialize () method of the form's "form" element itself is called, and the elements in the form are all serialized
The standard URL encoding, which is linked by the & number between elements.

⑦ using the Ajax () method to load server data
Using the Ajax () method is the lowest, most powerful method of requesting server data, and it can not only get the server
The returned data can also send a request to the server and pass a numeric value, which is called in the following format:
Jquery.ajax ([Settings]) or $.ajax ([settings])
Where the parameter settings is the configuration object when the AJAX request is sent, in which the URL represents the path requested by the server,
Data is passed at the request, datatype is the data type returned by the server, and success is the successful execution of the request
callback function, type is the way to send the data request, and the default is get.

$ (function  () {   $ (function  () {     $.ajax (       ){"URL",       data: {num: $ ("#txtNumber"). Val ()},       "POST",       function  (data) {         $ ( "ul"). Append ("<li> you enter <b>  "         + $ ("#txtNumber"). Val () + "</b> Yes <b>"         + (Data + "</b></li>")    ;});});

When the "Load" button is clicked, the $.ajax () method is called to request the TXT file on the server and is called when the request succeeds.
The success callback function gets the returned data and displays it in the page.

⑧ uses the Ajaxsetup () method to set some of the global option values for AJAX requests, and after the setup is complete, the Ajax
The request will not need to add these option values again, its invocation format is:
Jquery.ajaxsetup ([options]) or $.ajaxsetup ([options])
The optional options parameter is an object that sets the global option value for AJAX requests.

$(function() {$.ajaxsetup ({type:"POST", Success:function(data) {$ ("UL"). Append ("<li> you enter <b>" + $ ("#txtNumber"). Val () + "</b> is <b>" + Data + "&lt ;/b></li> ");   }   }); $("#btnShow_1"). Bind ("click",function() {$.ajax ({data: {num: $ ("#txtNumber"). Val ()}, URL:"URL"      }); })   $("#btnShow_2"). Bind ("click",function() {$.ajax ({data: {num: $ ("#txtNumber"). Val ()}, URL:"URL"      }); });});

After you set some global configuration options for AJAX requests using the Ajaxsetup () method, the AJAX request is called two times
Server TXT file, you only need to set the URL address.

⑨ using the Ajaxstart () and Ajaxstop () methods
The Ajaxstart () and Ajaxstop () methods are bound Ajax events. The Ajaxstart () method is used before the AJAX request is issued
The trigger function, the Ajaxstop () method, is used to trigger the function after the AJAX request completes. They are called in the following format:
$ (selector). Ajaxstart (function ()) and $ (selector). Ajaxstop (function ())
Two of these methods are bound functions, and execute the Ajaxstart () method binding function before the AJAX request is sent.
After the request succeeds, the function that executes the Ajaxstop () method is bound.

$(function () {  $("#divload"). Ajaxstart (function(){     $( This). HTML ("Requesting data ...");  }); $("#divload"). Ajaxstop (function(){     $( This). HTML ("Data request completed!") ");  }); $("#btnShow"). Bind ("click",function () {     var$ This= $( This); $.ajax ({URL:"URL", DataType:"JSON", Success:function(data) {$ This. attr ("Disabled", "true"); $("UL"). Append ("<li> My name is:" + data.name + "</li>"); $("UL"). Append ("<li> boyfriend said to me:" + Data.say + "</li>");  }    }); });});

JQuery for Ajax applications