PHP API介面測試小工具

標籤：

前端時間給手機用戶端做介面，當時弱爆了，寫完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下載：

http://download.csdn.net/download/loneleaf1/7966101

PHP API介面測試小工具