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手册。