restful api 支持get,post,put,delete等方法，那么jquery客戶端怎么去實現呢?涉及到跨域又怎么辦？
很多時候需要傳遞一個token(api_key) 去識別用戶身份，獲取訪問接口的權限。這里的token 不放在 header中（那個也能實現，就是比較麻煩，空了后面寫），是query類型。
首先設置下跨域的header:
header('content-type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS");
header("Access-Control-Allow-Headers:Content-Type");

為什么要加 Content-Type 呢？因為ajax的put方法會主動附加一個 Content-Type,OPTIONS方法的 header不一致導致put方法訪問失敗。

看到本文的朋友，估計會有我之前的疑問，太復雜的原理就不講了，簡單說下：ajax的put和delete方法時候，會主動先用OPTIONS方法嘗試獲取服務器的header信息，如果一致才會真實的發起PUT或DELETE方法。故服務器端應該在對應的api創建一個OPTIONS api（內容可以為空）。
基于這個原理，也可以實現在header中存放token，只是命名不能叫“token,api_key等”，應該叫"x-api-key,x-my-key" 的類似形式（x開頭，否則獲取不到。原因我也不不講了），那么客戶端發起ajax請求時候，需要在headers里增加前面說的"x-xxx-xx"的內容，服務器也做修改，如：header("Access-Control-Allow-Headers:access-control-allow-origin,content-type,x-api-key");大多數情況下，服務器端 設置的Access-Control-Allow-Headers 是固定的，那么就需要客戶端“造出”與服務器端一樣的header. 即便是不需要x-api-key的地方也在要header中傳遞這個參數，否則header就不一致導致失敗。

服務端環境：nginx,slim3.0
客戶端環境：framework7(dom7) [jquery一樣的有效。]

附客戶端代碼：

success: function (data) {alert(data);}}); });$$('#testput').on('click',function(){$$.ajax({url: 'http://apihaomai.runger.net/v1/mygroup/booking/quickPass',method: 'PUT',dataType: 'json',data: {api_key: '1121212122323213'},success: function (data) {alert(data);}}); });$$('#testdelete').on('click',function(){$$.ajax({url: 'http://apihaomai.runger.net/v1/me/stall/1',method: 'DELETE',dataType: 'json',data: {api_key: '1121212122323213'},success: function (data) {alert(data);}}); });

服務器端代碼：
$app->GET('/users/logout', function($request, $response, $args) {

$queryParams = $request->getQueryParams();$token = $queryParams['api_key']; $response= output_data($response,['token '=>$token ]);return $response;

});

$app->POST('/packet/{packet-id:[0-9]+}/buy', function($request, $response, $args) {

$queryParams = $request->getParams();$token = $queryParams['api_key']; $phone = $queryParams['phone']; $addressId = $queryParams['address_id']; $response->write(json_encode(['api_key'=>$token,'phone'=>$phone,'address_id'=>$addressId]));return $response;});

$app->PUT('/mygroup/booking/quickPass', function($request, $response, $args) {

$queryParams = $request->getParams(); //注意：這里使用的getParams()方法，非 getQueryParams()。$token = $queryParams['api_key']; $response->write(json_encode(['api_key'=>$token]));//$response->write('How about implementing mygroupBookingQuickPassPut as a PUT method ?');return $response;

});
//ajax post方法兼容（會先options一下）
$app->OPTIONS('/mygroup/booking/quickPass', function($request, $response, $args) {
return $response;
});

$app->DELETE('/me/stall/{stall-id:[0-9]+}', function($request, $response, $args) {

$queryParams = $request->getQueryParams();$token = $queryParams['api_key']; $stall_id=$args['stall-id'];$response->write(json_encode(['apk_key'=>$token,'stall_id'=>$stall_id]));return $response;});

$app->OPTIONS('/me/stall/{stall-id:[0-9]+}', function($request, $response, $args) {
return $response;
});

轉載于:https://www.cnblogs.com/ikodota/p/5645584.html

總結

以上是生活随笔為你收集整理的实战：ajax带参数请求slim API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。