Home > front end >  The jQuery Ajax summary
The jQuery Ajax summary

Time:12-28

In the jQuery $. Ajax ({Settings}) method
$. Ajax ({Settings})
Type: type, "POST" or "GET", the default value is "GET"
Url: send a request address
Async: set the asynchronous (default: true) under the default Settings, all requests for an asynchronous request, if you need to send a synchronous request, please chose the
Set to false, note that a synchronous request will lock the browser, users can other operation must wait for request to complete before execution,
Data: is an object that request data sent to the server along with
DataType: expect the server returns the data type of the, if not specified, the jQuery automatically according to the HTTP packet MIME information intelligent judgment, a
We use the json format, can be set to "json"
Success: it is a way, after the success of the request of the callback function, the incoming data after the return, and a string containing success code
Error: is a method and request failure is call this function, the incoming XMLHttpRequest object

Serialize () serialized form content as a string for the ajax request
SerializeArray () serialized form elements (like 'serialize ()' method) returns a JSON data structure,
Note: this method returns a JSON object rather than a JSON string, you need to use a plug-in or a third-party library for string operations, the returned JSON
Object is composed of an array of objects, each object contains one or two of value on - the name and value parameters

The mode of receiving data is four, and JavaScript Ajax is the same way of receiving
Content of the form: & lt; Input the id="name" & gt; , & lt; Select id="sex" & gt; , & lt; Textarea id="address" & gt;
Example://in the jQuery ajax method to get data from the server
The function jqGetData () {
$. Ajax ({
Type: "get",
Url:/jQueryAjax/getData,
Async: true,
DataType: "json",
Success: the function (data) {
//the console. The log (data);
$(" # name "). Val (data. Name);
$(" # sex "). Val (data. Sex);
$(" # address "). Val (data. The address);
}
});
};

//in the jQuery ajax method to submit data to the server
The function jqPostData () {
Var name=$(" # name "). Val ();
Var sex=$(" # sex "). Val ();
Var address=$(" # address "). Val ();
If (name=="" | | sex==0 | | address==" ") {
Alert (" incomplete data ");
return;
}
//data integration method: (1), (2), (3)
Var formData="https://bbs.csdn.net/topics/name=" + name + "& amp; Sex="+ +" sex & amp; Address="+ address;//(1) splicing form data
Var serData=https://bbs.csdn.net/topics/$(" # myForm "). The serialize ();//(2) the serialized form content as the string
//the console. The log (serData);
Var arrData=https://bbs.csdn.net/topics/$(" # myForm "). SerializeArray ();//(3) the serialized form content as a JSON object
//the console. The log (arrData);
$. Ajax ({
Type: "post",
Url:/jQueryAjax postData,
Data: formData,//by string concatenation processing form data
//data: serData,//through the processing form data serialization methods
//data: arrData,//through the processing form data serialization methods
Success: the function (data) {
Alert (data);
},
Error: function (XMLHTTP) {
The console. The log (XMLHTTP);
}
});
};

In the jQuery $.
the get () methodGrammar: $.get (url, [data], [callback], [type])
Description: HTTP GET requests via remote load information, it is a simple GET request function to replace the complex $. Ajax,
when the request is successfulThe callback function is invoked, if you need to go wrong when executing functions, please use $. Ajax,
Parameter description:
Url: send a request address,
Data: sent the Key/value parameter,
The callback: send success callback function,
Type: return content format, XML, HTML, script, json, text, _default,
Example://use $. The get () method to get data from the server
The function getFun () {
$.get ("/jQueryAjax/getData ", function (data) {
//the console. The log (data);
$(" # name "). Val (data. Name);
$(" # sex "). Val (data. Sex);
$(" # address "). Val (data. The address);
}, "json");
};

In the jQuery $. Post () method
Grammar: $.post (url, [data], [callback], [type])
Description: through remote HTTP POST request load information, it is a simple function of the POST request to replace the complex $. Ajax request is successful,
The callback function is invoked, if you need to go wrong executive function, please use $. Ajax,
Parameter description:
Url: send a request address,
Data: sent the Key/value parameter,
The callback: send success callback function,
Type: return content format, XML, HTML, script, json, text, _default,
Example://use $. Post () method to submit data to the server
The function postFun () {
Var name=$(" # name "). Val ();
Var sex=$(" # sex "). Val ();
Var address=$(" # address "). Val ();
If (name=="" | | sex==0 | | address==" ") {
Alert (" data is not complete!" );
return;
}
Var fromData=https://bbs.csdn.net/topics/$(" # myForm "). The serialize ();
$.post ("/jQueryAjax/postData "fromData, function (data) {
console.log(data);
});
};

$. In jQuery getJSON method ()
Grammar: $. GetJSON (url, [data], [callback])
Description: through HTTP GET request load JSON data
Parameter description:
Url: send a request address,
Data: sent the Key/value parameter,
The callback: send success callback function,
Example: the function getJSONFun () {
Var name=$(" # name "). Val ();
Var sex=$(" # sex "). Val ();
Var address=$(" # address "). Val ();
If (name=="" | | sex==0 | | address==" ") {
Alert (" data is not complete!" );
return;
}
Var fromData=https://bbs.csdn.net/topics/$(" # myForm "). The serialize ();
//$getJSON () method can only accept the return value is the json data, so the server returns value must be the json data
$. GetJSON ("/jQueryAjax getJSONData fromData, function (data) {
console.log(data);
});
};
Reception mode: public ActionResult getJSONData (string name, string sex, string address)
{
String STR="name:" + name + "" +", "sex, sex +" "+" address: "+ address;
Return a Json (STR, JsonRequestBehavior. AllowGet);
}
  • Related