jQuery --- AJAX

港控/mmm° 2023-10-11 12:44 70阅读 0赞

jQuery中有一套针对AJAX的封装，功能丰富

**底层函数：**

$.ajax（{参数，参数，参数.......  }）
    
     url:                            //服务器的地址
    
    type:                            //请求方式，默认为get
        
    date：{  id：1}                  //设置请求体 发送给服务器的 key/value数据  
    
    dataType： 'json'                //设置响应的格式
    
    beforeSend：function ( xhr) {     }         //一般用于加载提示
    
    success :function ( res ) {
    
                       //只有请求成功 （状态码为200），才会执行     } 
    
    error ： function （xhr）{   
    
                       //请求失败 时执行   }
    
    complete： function （res） {
    
                        //请求完成时执行，不管失败还是成功     }

**高度封装函数：**

$.xxx ( url ， data  ，callback  )

url：   服务器地址

data：发送给服务器的 key/value数据

callback：载入成功，然后执行的回调函数

快捷发送GET请求：
     $.get( url , {  id: 1 }  ,function ( res ) {    } )
    
    快捷发送POST请求：
    $.post( url , { id:1   }  ,function ( res ) {    } )
    
    客户端获取服务端响应的JSON数据（ 不管服务器传递的什么格式，得到的都是JSON格式）
    $.getJSON( url , {  id: 1 }  ,function ( res ) {   console.log(res)   } )

$(selector).load（）方法：   配合AJAX做局部刷新（pjax）

load（url ， data  ，callback）方法 
    
       url：   要载入的HTML地址 （局部时加上要做局部刷新处理的标签）   一般只使用这个参数
    
      data：发送给服务器的 key/value数据
    
      callback：载入成功，然后执行的回调函数

注意：还要记得去除浏览器的默认处理 ，链接跳转问题 return fasle ； 或 e.preventDefalut ( )

### **全局 Ajax 事件处理函数    **[jQuery123.com][] ###

对于 $.ajax( beforesend  / success / complete)  底层函数的抽象，将事件注册成全局事件，只要发送AJAX请求，自动完成，不用每次都写相同代码

$(document)
    
        .ajaxStart()   在AJAX 请求刚开始时执行一个处理函数。 
    
        .ajaxStop()    在AJAX 请求完成时执行一个处理函数。 
    
        .ajaxError()   在Ajax请求出错时注册一个回调处理函数

[jQuery123.com]: https://www.jquery123.com/category/ajax/global-ajax-event-handlers/