【ajax】jquery ajax 对接 rest api 接口示例 2015-07-30 17:27 4人阅读 评论(0) 收藏

rest api 接口规范中，有GET，POST，PUT，DELETE四种方法，

而通常jQuery的ajax中，大家都会使用GET和POST两种方法，

在w3c的官方网站（http://www.w3school.com.cn/jquery/ajax_ajax.asp）上对于jQuery中ajax的type方法的解释：

type
类型：String

默认值: "GET"。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

经过实际测试，所测的浏览器（IE7+、Firefox、Chrome）均支持上述四种方法，未提到的浏览器为未测试。

由于有时候rest api的接口和页面所在的域不同，ajax请求不支持跨域，则需要用反向代理解决这个问题，这个问题不是这里的重点，所以放在下一篇文章做介绍。

1、GET

// curl -kis "http://just.example.com/ajax/get_list?pos=0&limit=10"

$.ajax({
url:"/ajax/get_list?pos=0&limit=10",
type:'GET',
dataType:'json',
success:function(){ // http code 200
},
error:function(XMLHttpRequest, textStatus, errorThrown){
switch(XMLHttpRequest.status){
case 401:
break;
case 404:
break;
case 500:
break;
}
}
});

// curl -kis "http://just.example.com/ajax/get_list?pos=0&limit=10" -H "Authorization: Bearer xxxxxxxxxx"

$.ajax({
url:"/ajax/get_list?pos=0&limit=10",
type:'GET',
dataType:'json',
beforeSend: function(request) {
request.setRequestHeader("Authorization", "Bearer xxxxxxxxxx");
},
success:function(){ // http code 200
},
error:function(XMLHttpRequest, textStatus, errorThrown){
switch(XMLHttpRequest.status){
case 401:
break;
case 404:
break;
case 500:
break;
}
}
});

以上两个例子分别是不要增加header信息和需要增加header信息的GET方法的例子，需要增加的头信息放在beforeSend中即可。

而和接口通信的错误信息会返回在error中，根据XMLHttpRequest.status参数即可做区分，例子中有常用的401、404和500的判断。

通常获取列表，获取某个信息都是GET的方法。

2、POST

// 2 POST

// curl -kis "http://just.example.com/ajax/create_data" -X POST -d '{"name":"snow","gender":0}'

$.ajax({
url:"/ajax/create_data",
type:'POST',
data:'{"name":"snow","gender":0}',
dataType:'json',
success:function(){ // http code 200
},
error:function(XMLHttpRequest, textStatus, errorThrown){
switch(XMLHttpRequest.status){
case 401:
break;
case 404:
break;
case 500:
break;
}
}
});

// curl -kis "http://just.example.com/ajax/create_data" -X POST -d '{"name":"snow","gender":0}' -H "Authorization: Bearer xxxxxxxxxx"

$.ajax({
url:"/ajax/create_data",
type:'POST',
data:'{"name":"snow","gender":0}',
dataType:'json',
beforeSend: function(request) {
request.setRequestHeader("Authorization", "Bearer xxxxxxxxxx");
},
success:function(){ // http code 200
},
error:function(XMLHttpRequest, textStatus, errorThrown){
switch(XMLHttpRequest.status){
case 401:
break;
case 404:
break;
case 500:
break;
}
}
});

以上两个例子分别是不要增加header信息和需要增加header信息的POST方法的例子，需要增加的头信息放在beforeSend中即可。

通常新增数据都是POST的方法。

3、PUT

// curl -kis "http://just.example.com/ajax/update_data" -X PUT -d '{"name":"snow233","gender":1}' -H "Authorization: Bearer xxxxxxxxxx"

$.ajax({
url:"/ajax/update_data",
type:'PUT',
data:'{"name":"snow233","gender":1}',
dataType:'json',
beforeSend: function(request) {
request.setRequestHeader("Authorization", "Bearer xxxxxxxxxx");
},
success:function(){ // http code 200
},
error:function(XMLHttpRequest, textStatus, errorThrown){
switch(XMLHttpRequest.status){
case 401:
break;
case 404:
break;
case 500:
break;
}
}
});

通常修改数据都是PUT的方法。

4、DELETE

// curl -kis "http://just.example.com/ajax/delete_data/123456" -X DELETE -H "Authorization: Bearer xxxxxxxxxx"

$.ajax({
url:"/ajax/delete_data/123456",
type:'DELETE',
dataType:'json',
beforeSend: function(request) {
request.setRequestHeader("Authorization", "Bearer xxxxxxxxxx");
},
success:function(){ // http code 200
},
error:function(XMLHttpRequest, textStatus, errorThrown){
switch(XMLHttpRequest.status){
case 401:
break;
case 404:
break;
case 500:
break;
}
}
});

通常删除数据都是DELETE的方法。

附：

php 写 rest api 的接口，如何接收参数：

$data = file_get_contents('php://input');
$r = json_decode($data,true);

接收到的参数是json字符串，之后转换成json数组来进行处理