Summary of get post and ajax methods in jquery

In JQuery, you can use the get, post, and ajax methods to pass data to the server side

Use of the get method (customforget.js file) :

The function verify () {
//1. Get the data of the text box

// is obtained through DOM
/ / document. GetElementByIdx (" userName ");
// via JQuery
Var jqueryObj = $(" # userName ");
// gets the value of the node
Var userName = jqueryObj. Val ();

//2. Send the textbox data to the server-side servlet
$.get (" AJAXServer? Name = "+ userName, null, callback);
}
// callback function
The function callback (data) {

//3. Accept the data returned from the server
/ / alert (data);
//4. Display the data returned from the server to the page
// gets the node used to display the result information
Var resultObj = $(" # result ");
ResultObj. HTML (data);
}

You can abbreviate the above document as:
The function verify () {
$.get (" AJAXServer? Name = "+ $(" # userName"). Val (), null, the function callback (data) {$(" # result "). The HTML (data); });
}

Use of the post method (customforpost.js) :

The function verify () {
//1. Get the data of the text box

// is obtained through DOM
/ / document. GetElementByIdx (" userName ");
// via JQuery
Var jqueryObj = $(" # userName ");
// gets the value of the node
Var userName = jqueryObj. Val ();

//2. Send the textbox data to the server-side servlet
  / / $. Post (" AJAXServer? Name = "+ userName, null, callback); // with post, you can also directly follow the parameter to the URL
$.post (" AJAXServer, "{name: userName, test:" test123 "}, callback); // when passing multiple arguments separated by commas, the value of the attribute should be written directly if it is a variable, such as userName, and quoted if it is a character, such as "test123".
}
// callback function
The function callback (data) {

//3. Accept the data returned from the server
/ / alert (data);
//4. Display the data returned from the server to the page
// gets the node used to display the result information
Var resultObj = $(" # result ");
ResultObj. HTML (data);
}

You can abbreviate the above document as:
The function verify () {
$.post (" AJAXServer, "{name: $(" # userName"). Val (), the test: "test123"}, function (data) {$(" # result "). The HTML (data)});
}

Conclusion: In fact, get and post methods are similar, as long as get and post can be exchanged, and the storage location of parameters can be two places;

Such as:

$.post (" AJAXServer, "{name: $(" # userName"). Val (), the test: "test123"}, function (data) {$(" # result "). The HTML (data)});

Just change post to get without changing the position of the parameter, that is:

$.get (" AJAXServer, "{name: $(" # userName"). Val (), the test: "test123"}, function (data) {$(" # result "). The HTML (data)});

The use of the ajax method (customForAjaxText) receives data whose type is plain text:

The function verify () {
//1. Get the data of the text box
// via JQuery
Var jqueryObj = $(" # userName ");
// gets the value of the node
Var userName = jqueryObj. Val ();

//2. Send the textbox data to the server-side servlet
$. Ajax ({
Type: "POST",
Url: "AJAXServer",
Data: "name =" + userName + "&" + "test = 123",
Success: the function (data) {
$(" # result "). The HTML (data);
}
});
}

The use of the ajax method (customForAjaxText) receives data whose type is XML:

The function verify () {
//1. Get the data of the text box
// via JQuery
Var jqueryObj = $(" # userName ");
// gets the value of the node
Var userName = jqueryObj. Val ();

//2. Send the textbox data to the server-side servlet
$. Ajax ({
Type: "POST",
Url: "AJAXXMLServer",
Data: "name =" + userName + "&" + "test = 123",

DataType: "XML",
Success: the function (data) {
// first, we need to convert the DOM object passed to jquery object
Var jqueryObj = $(data);
// gets the message node
Var messageNods = jqueryObj. The children ();
// get the text content
Var responseText = messageNods. Text ();
$(" # result "). The HTML (the responseText);
}
});
}