Jquery/css3/HTML5 front-end [3] jquery Ajax

The jquery library has a complete Ajax compatibility suite. The functions and methods allow us to load data from the server without refreshing the browser.

1. Use the $. Ajax HTTP request to load Remote Data

By default, Ajax requests use the get method. If you want to use the post method, you can set the type: 'post' parameter value. This option also affects how the content in the Data option is sent to the server.

$. Ajax ({
URL:URL,
Data:Data,
Success:Success,
Datatype:Datatype
});

The data returned to the success callback function varies depending on the MIME type of the response. The data can be an XML root element, text string, Javascript file, or JSON object. You can also pass the response text status to the success callback function. For jquery 1.4, you can also pass the XMLHTTPRequest object to the success callback function. For jquery 1.5, the jqxhr object can also be passed to the success callback function.

2. Use $. ajaxsetup to set global Ajax default options

 1       //  Disable triggering of global Ajax events  2       // Use post instead of the default get Method  3       //  Default URL and success Functions  4 $ ( "  # Button  "  ). Click (function (){  5 $. Ajaxsetup ({type: "  Post  " , URL: "  /Controllername/actionname/ " , Global : False  ,  6   Success: function (data ){  7 $ ( "  # Div  "  Pai.html (data );  8   }  9   });  10  $. Ajax ();  11 });

3. Use the $. Get remote http get request to load information to change the text of the DIV Element

 1       //  Partial refresh  2   Function reload (ID ){  3 $. Get ( "  /Controllername/actionname/  " , // URL:/controllername/actionname/  4 {ID: ID, Name: '  @ Viewdata ["name"]  ' }, //  Parameter: ID, name: '@ viewdata ["name"]'  5 Function (data ){ //  Return Value: Data  6 $ ( "  # Div "  Pai.html (data );  7   });  8 }

 1       //  Field sorting  2 $ ( "  #  "  ). Click (function (){  3 $. Get ( " /Controllername/actionname/  "  ,  4 {ID: '  @ Viewdata ["ID"]  ' , Sortfield: "  User_username  " , Order: '  @ Viewdata ["orderby"]. tostring ()  '  },  5  Function (data ){  6 $ ( "  # Div  "  Pai.html (data );  7   });  8 });

 1       //  Keyword Query  2 $ ( "  # Button "  ). Click (function (){  3           //  Returns the ID of the Selected tab. The default value is 0.  4           VaR Selected = $ ( '  # Tab  ' ). Tabs (). tabs ( '  Option  ' , '  Selected  ' );  5           VaR Keyword = $ ( "  # Txtkeyword  "  ). Val ();  6 $. Get ( "  /Controllername/actionname/  "  ,  7   {Keyword: keyword }, 8   Function (data ){  9 $ ( "  # Div  "  Pai.html (data );  10                                       //  Initialize the Selected tab  11 $ ( '  # Tab  ' ). Tabs (). tabs ( ' Select  '  , Selected );  12   });  13 });

4. Use the $. Post http post request to load data from the server to change the text of the DIV Element

  1  ///   use $. pages read by post are not cached   2  $ ("  #button  "   ). click (function () {  3  $. post ( " /controllername/actionname/ "  , function (data) {  4  $ ("  #div  "   pai.html (data);   5  });   6 }); 

5. Use $. Post to add, delete, and modify

 1       //  Data Operations  2 $ ( "  # Button  "  ). Click (function (){  3           VaR Id = $ ( This ). ATTR ( '  ID  '  );  4          //  If (confirm ("are you sure you want to delete this record? ")){  5               //  Can be added, deleted, or modified.  6 $. Post ( "  /Controllername/actionname/  "  ,  7   {ID: Id },  8   Function (data ){  9                                          //  Return Value Judgment Execution result  10                                           If (Data = "  True  "  ){  11   Reload (ID );  12 } Else  {  13   Alert (data ); 14   }  15   });  16           //  }  17           //  Return false;  18 });

6. Use the $. getjson http get request to load JSON data

 1       //  Data can be an object or an array defined in a JSON structure and parsed using the $. parsejson () method. 2 $ ( "  # Button  "  ). Click (function (){  3 $. Getjson ( "  /Controllername/actionname/  "  , Function (data ){  4   $. Each (data, function (I, field ){  5 $ ( "  # Div " ). Append (field + "   "  );  6   });  7               //  Field data  8               //  $ ("# Div"). append (data. Field + "");  9   });  10 });

7. Use $. getscript http get to load and execute JavaScript files

1//Load and execute2$ ("# Button"). Click (function (){3$. Getscript ("Demo. js");4});