前端時間給手機客戶端做接口，當時弱爆了，寫完API接口后，也不怎么測試，最后是等客戶端調用的時候檢驗API的正確性。
后面利用PHP的curl實現Post請求，檢驗API接口的正確性；配合前面做的一個查看Apache錯誤日志的小工具，可將將錯誤一覽無余；利用firebug或fiddler可以查看http通訊。
一、功能說明
| 樣式 | firebug中的http通信信息 |
1、client_name、client_version、api_debug和url這幾個是每次都需要傳的參數，除了url其他3個參數都可以根據實際情況修改，url是每個接口的地址
2、一行兩個輸入框的地方是可變參數，就是每個接口特有的需要傳遞的參數，參數名和參數值都可以自定義
3、點擊添加參數可以增加那行可變參數
4、點擊測試，將輸入框中的數據發送到接口中
5、從接口端返回JSON格式的數據直接打印出來
二、html部分
<style type="text/css"> .mb20{margin-bottom:20px} .title{display:inline-block;width:150px;text-align:right} .w100{width:100px} .mr10{margin-right:10px} </style>
<div class="mb20"> <label class="title">client_name：</label><input name="client_name" type="text" value="ANDROID"/> </div> <div class="mb20"> <label class="title">client_version：</label><input name="client_version" type="text" value="4.0"/> </div> <div class="mb20"> <label class="title">api_debug：</label><input name="api_debug" type="text" value=""/> </div> <div class="mb20"> <label class="title">url：</label><input name="client_url" type="text" value=""/> </div> <div class="mb20"> <label class="title"><input name="api_key" type="text" value="" class="w100"/>：</label><input name="api_value" type="text" value=""/> </div> <div class="mb20"> <label class="title"></label><input type="button" value="測試" id="submit" class="mr10"/><input type="button" value="添加參數" id="add"/> </div> <div id="message"></div>
這里做了點簡單的修改，高度，寬度等。可變參數那行只用了name屬性，分別是api_key和api_value，方便等下的克隆操作。
三、JavaScript部分
<script type="text/javascript"> $("#add").click(function() { var $parent = $(this).parent(); var $clone = $parent.prev().clone(); $clone.find(':text').val(''); $clone.insertBefore($parent); }); $("#submit").click(function() { var api_keys = { api_debug:$('input[name=api_debug]').val(), client_url:$('input[name=client_url]').val() }; $('input[name=api_key]').map(function() { var key = $.trim($(this).val()); var value = $.trim($(this).next().val()); var repeat = {}; if(key != '') { repeat[key] = value; api_keys = $.extend(api_keys, repeat); } }); //提交到test文件中 $.post('test.php', api_keys, function(data) { $("#message").html(data); }); }); </script>
1、綁定兩個按鈕的click事件
2、$("#add")的click事件是在做克隆操作，克隆的同時將原先兩個輸入框中的內容清除
3、$('input[name=api_key]').map在做過濾無效可變參數的操作；有效的可變參數是指參數名和參數值都存在，只有都存在的才會發送過去
4、$("#submit")通過post給test.php，通過它來發送消息給接口
四、php部分
<?php $root = 'http://api.1ddian.cn/';//可自定義域名 $url= $root . $_REQUEST['client_url']; //用curl實現Post請求，可跨域 $ch = curl_init(); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POSTFIELDS, $_REQUEST); //傳送參數 ob_start(); curl_exec($ch); $result = ob_get_contents() ; ob_end_clean(); print_r(json_decode($result)); //中文返回的是unicode編碼，decode后方便閱讀 ?>
1、$root這個域名可以自定義
2、用curl實現Post請求，可跨域
3、中文返回的是unicode編碼，decode后方便閱讀
demo下載：