【ajax】jquery ajax 对接 rest api 接口示例

前端之家收集整理的这篇文章主要介绍了【ajax】jquery ajax 对接 rest api 接口示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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",beforeSend: function(request) {
		request.setRequestHeader("Authorization","Bearer xxxxxxxxxx");
	},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}',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",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}',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',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数组来进行处理

猜你在找的Ajax相关文章