【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請求不支持跨域，則須要用反向代理解決這個問題，這個問題不是這裏的重點，因此放在下一篇文章作介紹。

一、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參數便可作區分，例子中有經常使用的40一、404和500的判斷。

一般獲取列表，獲取某個信息都是GET的方法。

二、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的方法。

三、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的方法。

四、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數組來進行處理