jQuery中Ajax的使用

  • A+
所属分类:Web前端
摘要

  在使用原生Ajax发送一个请求时,过程多少有点繁琐,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手册。