There are 4 ways to call ajax in jQuery: $ .get (), $ .post (), $ getJSON () and $ ajax ().

The first thing to know is that these four methods are asynchronous requests

1. $ .get () request

Note: $ .get () is anAJAX asynchronous request implementedin GET mode . It is available whensubmitting short data [the amount of data cannot be too large, up to 4KB].

Grammar and parameter meaning :

$.get(
    url,          //必需:将请求发送到哪里的URL链接
    data,         //可选:连同请求发送到服务器的数据【俗称:参数】
    success(      //可选:当请求成功时运行的函数
        response, //包含来自请求的结果数据
        status,   // 包含请求的状态
        xhr       //包含 XMLHttpRequest 对象
    ),
    dataType      //可选:预计的服务器响应的数据类型
                  //默认jQuery 将智能判断。可能的类型有:"xml"、"html"、"text"、"script"、"json"和"jsonp"
)
 

/* dataType参考值的含义 */
   //"xml" - 一个 XML 文档
   //"html" - HTML 作为纯文本
   //"text" - 纯文本字符串
   // "script" - 以 JavaScript 运行响应,并以纯文本返回
   // "json" - 以 JSON 运行响应,并以 JavaScript 对象返回
   // "jsonp" - 使用 JSONP 加载一个 JSON 块,将添加一个 "?callback=?" 到 URL 来规定回调

Common examples

//1、只有路径
    $.get("XXX/XXXXXX");

//2、路径+参数【两个参数:姓名和年龄】
    $.get("XXX/XXXXXX", {name: "John",age: "20"});
  
//3、路径+参数+回调方法
    $.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
        alert("返回的数据是:"+data);
    });

//4、路径+参数+回调方法+返回值类型【json】
    $.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
        alert("返回的数据是:"+data);
    },"json"));

Second, the $ .post () request

Explanation: $ .post () implements AJAX asynchronous request in POST mode .

Syntax and parameter meaning [same as get except for keywords]:

$.post(
    url,          //必需:将请求发送到哪里的URL链接
    data,         //可选:连同请求发送到服务器的数据【俗称:参数】
    success(      //可选:当请求成功时运行的函数
        response, //包含来自请求的结果数据
        status,   // 包含请求的状态
        xhr       //包含 XMLHttpRequest 对象
    ),
    dataType      //可选:预计的服务器响应的数据类型
                  //默认jQuery 将智能判断。可能的类型有:"xml"、"html"、"text"、"script"、"json"和"jsonp"
)
 

/* dataType参考值的含义 */
   //"xml" - 一个 XML 文档
   //"html" - HTML 作为纯文本
   //"text" - 纯文本字符串
   // "script" - 以 JavaScript 运行响应,并以纯文本返回
   // "json" - 以 JSON 运行响应,并以 JavaScript 对象返回
   // "jsonp" - 使用 JSONP 加载一个 JSON 块,将添加一个 "?callback=?" 到 URL 来规定回调

Common examples

//1、只有路径
    $.post("XXX/XXXXXX");

//2、路径+参数【两个参数:姓名和年龄】
    $.post("XXX/XXXXXX", {name: "John",age: "20"});
  
//3、路径+参数+回调方法
    $.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
        alert("返回的数据是:"+data);
    });

//4、路径+参数+回调方法+返回值类型【json】
    $.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
        alert("返回的数据是:"+data);
    },"json"));

Three, $. GetJSON () request

Explanation: $ .getJSON () is specially set for ajax to get json data , and supports cross domain ( protocol + domain name + port number are the same, then it is the same domain ) call.

PS: JSON is an ideal data transmission format, it can be well integrated with JavaScript or other host languages, and can be directly used by JS. The use of JSON is more reasonable in structure and safer than traditionally sending "naked" data directly via GET or POST. As for jQuery's getJSON () function, it's just a simplified version of the ajax () function with JSON parameters set. This function can also be used across domains, and has certain advantages over get () and post ().

Grammar and parameter meaning:

$.getJSON(
    url,          //必需:将请求发送到哪里的URL链接
    data,         //可选:连同请求发送到服务器的数据【俗称:参数】
    success(      //可选:当请求成功时运行的函数
        response, //包含来自请求的结果数据
        status,   // 包含请求的状态
        xhr       //包含 XMLHttpRequest 对象
    )  
) 

Common examples

//1、只有路径
    $.getJSON("XXX/XXXXXX");

//2、路径+参数【两个参数:姓名和年龄】
    $.getJSON("XXX/XXXXXX", {name: "John",age: "20"});
  
//3、路径+参数+回调方法
    $.getJSON("XXX/XXXXXX", {name: "John",age: "20"},function(data){
        alert("返回的数据是:"+data);
    });
 

Four, $ .ajax () request

Description: The $ .ajax () method is used to execute AJAX asynchronous requests. All jQuery AJAX methods use the ajax () method. This method is usually used for requests that cannot be completed by other methods.

The syntax and parameters of $. ajax () are relatively many, not listed here, if you are interested, please refer to the jQuery ajax () method

Common examples

$.ajax({
   url : 'XXXXXX/XXXXXXXX',  //请求链接
   async:true,//请求是否异步:默认为异步
   data : { //参数
       id : $("#id").val(),
       name: $("#name").val()
   },
   dataType : 'json', //返回值的数据类型
   type:"POST",   //请求方式POST或GET
   success : function(map) {
      alert("执行成功后的回调函数");
   }
 });

 

Published 77 original articles · 100 likes · 70,000+ views

Guess you like

Origin blog.csdn.net/super_DuoLa/article/details/103140315