2021-05-04

jQuery中Ajax的使用

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

 在jQuery中有专门的Ajax封装,具体参照JQuery-Ajax参考手册网址

这里用一段练习代码展示下使用方法:

//使用要引入jQuery文件 <script src="../jq/jquery-1.12.4.min.js"></script> $.ajax({  url:"http://localhost:3000/users",  type:"get",  dataType:"json",  data:{"id":3},  beforeSend:function(xhr){  console.log("before send"); },success:function(data){  console.log(data); }, error:function(){  console.log("请求error"); }, complete:function(xhr){  console.log("complete");  console.log(xhr); }})

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

  • url:请求地址;

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

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

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

  • data:需要传输到服务器的数据,如果是get则通过、url传递;post则通过请求体传递;

  • timeout:请求超时时间;

  • beforeSend:请求发起之前触发;

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

  • error:请求失败触发;

  • complete:请求完成后触发(不管成功与否)

jQuery中其他请求:

  • $.get(),获取数据

    jQuery中get请求快捷方法:$.get(url,data,callback回调函数,返回的数据格式datatype);

    //发送 get请求 $.get("http://localhost:3000/liuyan",{"content":"hi"},function(data){ console.log(data);});
  • $.post,添加数据

    $.post(url,data,callback)

    //发送post请求 $.post(url,data,callback,datatype)$.post("http://localhost:3000/liuyan",{"content":"ajax","userId":1},  function(data){   console.log(data);  })
  • $.put,更改数据

    //put 请求$.ajax({  url:"http://localhost:3000/liuyan/5",//需要在地址上标出改的主键  type:"put",  dataType:"json",  data:{"content":"put 请求啊"},//改的内容  success:function(data){  console.log(data)  }})
  • $delete,删除数据

    //删除数据 delete请求$.ajax({ url:"http://localhost: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);  }})
  • $.ajaxSetup() 方法设置全局 AJAX 默认选项。

    $.ajaxSetup({  url:"https://localhost:3000",  type:post});$.ajax({  data:{"name":"value"}});
  • 等等还有很多方法,可以参考jquery-Ajax手册。









原文转载:http://www.shaoqun.com/a/720763.html

跨境电商:https://www.ikjzd.com/

marks spencer:https://www.ikjzd.com/w/2385

myyearbook:https://www.ikjzd.com/w/726


在使用原生Ajax发送一个请求时,过程多少有点繁琐,jQuery中对于Ajax请求有它自己的封装好的函数,使用起来分方便。 在jQuery中有专门的Ajax封装,具体参照JQuery-Ajax参考手册网址这里用一段练习代码展示下使用方法://使用要引入jQuery文件<scriptsrc="../jq/jquery-1.12.4.min.js"></scrip
mav:https://www.ikjzd.com/w/2414
勤商网:https://www.ikjzd.com/w/2219
拍拍网:https://www.ikjzd.com/w/2205
Shopify后台基本设置(附图文实操):https://www.ikjzd.com/tl/97729
海外仓红利还剩多少·掘金欧美海外仓:https://www.kjyunke.com/courses/208
卖家如何通过国外社交平台获得新流量池,收藏这几个小技巧!:https://www.ikjzd.com/home/103261

No comments:

Post a Comment