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