$. Get (), $. post (), and $. ajax () in jQuery ()

Source: Internet
Author: User

JQuery. get () method:

$.get(url,data,success(response,status,xhr),dataType)

This function is short for Ajax functions and is equivalent:

$.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.

Parameters Description
Url Required. Specifies the URL of the request.
Data Optional. Specifies the data sent to the server together with the request.
Success (response, status, xhr)

Optional. Specifies the function that runs when the request is successful.

Additional parameters:

  • Response-contains the result data from the request
  • Status-contains the Request status
  • Xhr-contains XMLHttpRequest object
DataType

Optional. Specifies the expected server response data type.

By default, jQuery performs intelligent judgment.

Possible types:

  • "Xml"
  • "Html"
  • "Text"
  • "Script"
  • "Json"
  • "Jsonp"

Use the ajax get request to change the text of the div element:

$("button").click(function(){  $.get("demo_ajax_load.txt", function(result){    $("div").html(result);  });});

JQuery. post () method:

$.post(url,data,success(data, textStatus, jqXHR),dataType)

This function is short for Ajax functions and is equivalent:

$.ajax({  type: 'POST',  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.

Parameters Description
Url Required. Specifies the URL to which the request is sent.
Data Optional. Ing or string value. Specifies the data sent to the server together with the request.
Success (data, textStatus, jqXHR) Optional. The callback function executed when the request is successful.
DataType

Optional. Specifies the expected server response data type.

Intelligent judgment (xml, json, script, or html) is performed by default ).

Use the ajax get request to change the text of the div element:

$("input").keyup(function(){  txt=$("input").val();  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){    $("span").html(result);  });});

 

Instance:

A simple POST Request function replaces the complex $. ajax. You can call the callback function when the request is successful. To execute a function when an error occurs, use $. ajax. Sample Code:

Ajax. aspx:

Response. ContentType = "application/json"; Response. Write ("{result: '" + Request ["Name"] + ", hello! (This message comes from the server )'}");

JQuery code:

$. Post ("Ajax. aspx ", {Action:" post ", Name:" lulu "}, function (data, textStatus) {// data can be xmlDoc, jsonObj, html, text, and so on. // this; // configure the options for this Ajax request. For more information, see jQuery. this alert (data. result );
}, "Json ");

Click to submit:

The request format is set to "json ":


$. Ajax () is the underlying AJAX Implementation of jQuery. For easy-to-use high-level implementation, see $. get, $. post, and so on.

Here are several Ajax event parameters:BeforeSend,Success,Complete, error.We can define these events to process every Ajax request.

$.ajax({url: 'stat.php',type: 'POST',data:{Name:"keyun"},dataType: 'html',timeout: 1000,error: function(){alert('Error loading PHP document');},success: function(result){alert(result);}});

$. Get () and $. post:

Computer network briefly explains the POST and GET methods in HTTP: HTTP defines two types of communication packets: Request Message and Response Message. For a request message, its common format consists of three main parts: request line, first line, and entity body. Generally, the request line is in the format of Method Field, URL field, and HTTP Protocol version field. The method field includes the GET and POST methods.

When the method field is the GET method, the content subject is empty, but the object subject is used only when the POST method is used.

The HTTP client usually uses the POST method when submitting a form. In this case, the entity body contains the user's input values in the form. Of course, the GET method can also submit data in the form, which is achieved by transferring the user's input value in the form to the correct URL. This is what we usually see in http://ei.hust.edu.cn? Username = "libis" & age = 12.

 

It can be seen that there is a big difference between the two in the form submission method:

 

 

 

 

In addition, another important difference between the get method and the post method is:

 

 

$. Ajax:

1. There are three main methods of data: html splicing, json array, form serialized by serialize (); specified by dataType, no smart judgment is specified.

2. $. ajax only submits the form in text mode. If the asynchronous submission contains <file> upload is not passed, you need to use $. ajaxSubmit of jquery. form. js.

$. Ajax () Example

// 1. $. ajax asynchronous request with json data var aj =$. ajax ({url: 'productmanager _ reverseupdat', // jump to action data: {selRollBack: selRollBack, selOperatorsCode: selOperatorsCode, PROVINCECODE: PROVINCECODE, pass2: pass2}, type: 'post', cache: false, dataType: 'json', success: function (data) {if (data. msg = "true") {// view ("modified successfully! "); Alert (" modified successfully! "); Window. location. reload () ;}else {view (data. msg) ;}, error: function () {// view (" exception! "); Alert (" exception! ") ;}}); // 2. $. ajax serialized asynchronous request function noTips () {var formParam = $ ("# form1") whose table content is a string "). serialize (); // serialize the table content as a string $. ajax ({type: 'post', url: 'notice _ noTipsNotice ', data: formParam, cache: false, dataType: 'json', success: function (data) {}});} // 3. $. asynchronous request var yz = $. ajax ({type: 'post', url: 'validatepwd2 _ checkPwd2? Password2 = '+ password2, data :{}, cache: false, dataType: 'json', success: function (data) {if (data. msg = "false") // if the server returns false, change the value of validatePassword2 to pwd2Error. This is asynchronous, the return time {textPassword2.html ("<font color = 'red'> incorrect business password! </Font> "); $ (" # validatePassword2 "). val ("pwd2Error"); checkPassword2 = false; return ;}}, error: function () {}}); // 4. $. asynchronous request for ajax splicing data $. ajax ({url: '<% = request. getContextPath () %>/kc/kc_checkMerNameUnique.action ', type: 'post', data: 'mername =' + values, async: false, // The default value is true asynchronous error: function () {alert ('error') ;}, success: function (data) {$ ("#" +divs#.html (data );}});


 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.