Introduction to jquery support for ajax

  • 2020-03-30 00:50:37
  • OfStack

1. Three ways

1.1. The load method

// effect: directly add the data returned by the server to the dom object that meets the requirements
// is equivalent to obj.innerHTML = the data returned by the server

$obj.load(url,[request parameter]);

Url: request address
Request parameters:
The first form: a request string, such as 'username=zs&age=22'
Second form: object such as {'username':'zs','age':22}

/ / note:
//a, the load method, if there are no parameters, will use get to send the request. If there are arguments, the request is sent using post.
//b, if there is a Chinese parameter value, the load method has done the coding for us.


var airline = $(this).parent().siblings().eq(0).text(); 
$(this).next().load('','airline=' + airline); 
$(this).html(' Show economy class price '); 
$(this).html(' Show all fares '); 

1.2.$. Get () and $. Post () methods

// function: send a get or post request to the server (get request ie has cache problems)

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

Url: request address
Data: request parameter, in the same form as above.
Callback: a callback function that handles the data returned by the server.
The callback format:

Function (data, statusText),

Where, data can get the data returned by the server,
StatusText is a simple string that describes the state of server processing.

Type: the data type returned by the server, which can be:
HTML: returns HTML content.
Text: returns text.
Json: returns a json string
XML: returns a dom-compatible XML object
Script: returns the javascriptz

function quoto(){ 
//If the data returned from the server is a json string,
//Automatically converts to an array of js objects or json objects.
'<tr><td>' + data[i].code 
+ '</td><td>' + data[i].name 
+ '</td><td>' + data[i].price 
+ '</td></tr>'); 

1.3 $. Ajax (options) :

/ / options are a form such as {key1: value1, key2: value2... } js object that specifies the option to send the request.

Option parameters are as follows:

Url (string) : // request address
Type (string) : / / GET/POST
Data (object/string) : // data sent to the server
DataType (string) : // the dataType expected to be returned by the server
Success (function) : // callback function called after a successful request, with two arguments:
Function (data, textStatus),
Where, data is the data returned by the server,
TextStatus describes the string of states.
Error (function) : // function called when a request fails, with three arguments
The function (XHR, textStatus errorThrown),
Where XHR is the underlying ajax object (XMLHttpRequest),
One can get the underlying exception description.
Async :true(default)/false: // when the value is false, send the synchronization request.


//Data is the data returned by the server
//If the return is an XML document, we need to use it
//The $function wraps it in $(data) as a jQuery
//Object, easy to find.
//Empty before you append
'<tr><td> manufacturers :' 
+ $(data).find('company').text() 
+'  The price :' + $(data).find('price').text() 
+' </td><td> Body size :' 
+ $(data).find('size').text() 
+ '  Gate number :' + $(data).find('door').text() 
+ '</td><td> displacement : ' 
+ $(data).find('vol').text() 
+ '  acceleration :' 
+ $(data).find('speed').text() 
+ '</td></tr>'); 
//You want to display the table
"<tr><td colspan='3'> This model information is temporarily unavailable </td></tr>"); 

Example 2:
Solve the problem of Chinese garbled code:
$('#msg_verCode').text(' Verification code error '); 

2. Two complementary approaches

2.1 serialize () :

// converts a form or form control contained in a jquery object into a query string.

2.2. SerializeArray () :

/ / is converted to an array, each array element shape such as {name: fieldName, value: fieldVal} of the object.
The // serialization element is primarily used to assign data to ajax requests.

Only for forms or form controls
Directly send the name and the corresponding value of the form, such as :name=value

$.ajax({}) In the  


Related articles: