jQuery中Ajax的使用

在使用原生Ajax发送一个请求时,过程多少有点繁琐,jQuery中对于Ajax请求有它自己的封装好的函数,使用起来分方便。 在jQuery中有专门的Ajax封装,具体参照JQuery-Ajax参考手册网址 这里用一段练习代码展示下使用方法: //使用要引入jQuery文件 <script src=” …

  在使用原生Ajax发送一个请求时,过程多少有点繁琐,jQuery中对于Ajax请求有它自己的封装好的函数,使用起来分方便。

 在jQuery中有专门. | – F L =的Ajax封装,具体参照JQuery-Ajax参考手册网址

这里用一r ) n 2 ! [ R # M段练习代码展示下使用方法:

//使用要引入jQuery文件 <script src="https:\ N D J 4//www.cnbl1 ) ` G :ogs.com/dreamtown/jq/jquery-1.12.4.min.js"></script>
$.ajax({
url:"http_ c a W i s $ ] Q://localhost:3000/users",
type:"get"X d o `,
dM j Q m :ataType:"json",
data:{"id":3},
beforeSend:\ . ( G U t z m Wfunction(xhr){
console.log("before send");
},\ # H * p 2 n } 6
success:function(data){
console.log(data);
},
error:function(){
console.log("请求error");
},
complete:function(xhr){
console.log("complete");
con) I a : b 1sole.log(xhr);
}
})

关于jQuery中$.ajax() 的几个参数介绍:

  • url:请求地址;

  • type:请求方法,默认为”get”;

  • dataType:服务端响应数据类型;

  • contentType:请求体内容的类型,默认“application/x-www-form-urlencode”;

  • data:需要传输到服务器的数据,如果是get则通过、u} l [ l srl传递;post则通过请求体传a $ _ 6 m m递;

  • timeo~ r M A + ] U =ut:请求超时时间;

  • beforeSend:请求t 3 9 / z U A发起之前触发;

  • success:请求成功之后触发(响应状态码23 7 U00);

  • error:请求失败触发;

  • compleb v _ 1 6 X 6 Gte:请求完成后触发(不管成功与否)

jQuery中其他请求:

  • $.get(),获取数据

    jQuery中get请求快捷方法:$.k I N ^ 9 ;get(url,data,callban W k G 6 .ck回调函数,返回的数据格式datatype);

    //发送 get请求
    $.g; 2 X ? L z k Zet("httpr z x Y B % ; M://localhost:3000/liuyan",{"content":"hi"},
    function(dat) % t } Q | H ga){
    console.log(dm j ] / o ? lata);
    });
    
  • $.post,添加数据

    $.post7 5 s N 6 i =(url,data,callbah } ) ] S L ; 1ck)

    //发送post请求  $? . l i O u @ Q 1.post(url,data,callback,datatyT & } N X ; % D Speo % K Y @ A Y)
    $.post("http://localhost:3000/liuyan",{"content":"ajax","userId":1},
    function(data){
    console.log(data);
    })
    
  • $.put,更改数据

    //put 请求
    $.ajax({
    url:"http://localhost:3000/liuyank = ^/5",//需要在地址上标出改的主键g v \ q Q } $ o N
    type:"put",
    dataType:"json",
    data:{O } Y I o j 9 +"content":"put 请求啊"},//改的内容
    success:function(data){
    console.log(data)
    }
    })
    
  • $delete,删除数据

    /J ~ h F =/删除数据 delete请求
    $.ajax({
    url:"http://localhost} ; / Z k o D:3000/liuyan/6",
    type:"delete",
    success:function(data){
    console.log{ / ,(data);
    }
    })
    
    //删除数据 delete请求
    $.ajax({
    url:"http://localhost:3000/liuyan/6",
    type:"delete",
    success:function(data){
    console.log(data);
    }
    })
    
  • $.a? I c F KjaxSe: y \ – )tup() 方法设置全局 AJAX 默认选项。

    $.ajax~ _ ? Q _Setup({
    url:"https://localhost:0 \ o3000",
    type:post
    });
    $.ajax({
    data:{"name":"value"}
    });
    
  • 等等还有很多方法,可以参考jquery-Ajax手册。

上一篇 2021年5月15日 下午4:26
下一篇 2021年5月15日 下午4:26