JQuery Ajax补充

墨蓝 2023-07-05 11:56 11阅读 0赞

# Ⅰ- 壹 - JQuery Ajax #

## 一 JQuery中的ajax分为三层 ##

*  最顶层
    
    $.getScript() $.getJSON();
 *  中间层  
    $(“elem”).load() $.get() $.post()
 *  最基础层
    
    $.ajax();

## 二 最顶层 $.getScript() $.getJSON() ##

### 1 $.getScript() ###

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

$.getScript("./js/a.js",function(res){ 
                // var script=document.createElement("script");
                // script.innerHTML=res;
                // document.body.appendChild(script);
                // abc();
                //进行转移处理,res回调函数的数值
                $("<script><\/script>").appendTo("body").html(res);
                abc();
            })

添加多个

### 2 $.getJSON() ###

getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

$.getJSON("./package.json",function(res){ 
                console.log(res);
            })

## 三 中间层  ( " e l e m " ) . l o a d ( ) 、 ("elem").load()、 ("elem").load()、.get()、$.post() ##

### 1 load() ###

load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。

1.  可以用于两个页面的衔接

$("body").load("./a.html")  加载页面

1.  加载json

$("div").load("./package.json");

$(document).load("./package.json",function(res){ 
                console.log(res);
            })

1.  传数据

$("div").load("http://127.0.0.1:8001/?a=3&b=4");

GET和POST方式

// ______
        $(document).load("http://127.0.0.1:8001/","a=3&b=4",function(res){ 
            console.log(res);
        }) 
         $(document).load("http://127.0.0.1:8001/","a=3&b=4",function(res,success,xhr){ 
            console.log(res,success,xhr);
        }) 
        // ________以上两种写法都是GET方式通信
    
        // ——————————下面这种是POST方式通信
         $(document).load("http://127.0.0.1:8001/",{ a:3,b:4},function(res,success,xhr){ 
            console.log(res,success,xhr);
        })

### 2 POST() ###

$.post("http://127.0.0.1:8001/",{ a:10,b:20},function(res){ 
                console.log(res);
            });

### 3 GET() ###

$.get("http://127.0.0.1:8001/",{ a:10,b:50},function(res){ 
                console.log(res);
            })

## 四 最基础层 Ajax ##

Ajax方法参数：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>String</td> 
   <td>发送请求的地址</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>get/post 默认get方式</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>String</td> 
   <td>设置数据类型比如html、xml、json 等 dataType:“json”</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>Object或String</td> 
   <td>发送到服务器的数据，键值对字符串或对象</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>请求成功后调用的回调函数</td> 
  </tr> 
  <tr> 
   <td>async</td> 
   <td>Boolean</td> 
   <td>是否异步处理。默认为true, false 为同步处理</td> 
  </tr> 
  <tr> 
   <td>timeout</td> 
   <td>Number</td> 
   <td>设置请求超时的时间(亳秒)</td> 
  </tr> 
  <tr> 
   <td>jsonp</td> 
   <td>String</td> 
   <td>指定-一个查询参数名称来覆盖默认的jsonp回调参数名callback.</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

默认使用方法

$.ajax({ 
                // type： get/post 默认get方式
        		// dataType:"json", 设置数据类型
                url:"http://127.0.0.1:8001/",
                data:{ a:10,b:20},
                success:function(res){ 
                    console.log(res);
                }
            })

自定义方式

$.ajax({ 
                type:"post",
                dataType:"json",
                // dataType:"jsonp",
                url:"http://127.0.0.1:8001/",
                data:{ a:10,b:20},
                success:function(res){ 
                    console.log(res);
                }
            })

例子：百度

$.ajax({ 
                dataType:"jsonp",
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data:"wd=谢天&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback",
                jsonp:"callback"
            })
            function callback(data){ 
                console.log(data);
            }