jQuery中Ajax的使用

  在使用原生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手册。

町子门户

链接