PHP API接口測試小工具

前端時間給手機客戶端作接口，當時弱爆了，寫完API接口後，也不怎麼測試，最後是等客戶端調用的時候檢驗API的正確性。javascript

後面利用PHP的curl實現Post請求，檢驗API接口的正確性；配合前面作的一個查看Apache錯誤日誌的小工具，可將將錯誤盡收眼底；利用firebug或fiddler能夠查看http通信。php

 

1、功能說明

樣式	firebug中的http通訊信息

 

一、client_name、client_version、api_debug和url這幾個是每次都須要傳的參數，除了url其餘3個參數均可以根據實際狀況修改，url是每一個接口的地址css

二、一行兩個輸入框的地方是可變參數，就是每一個接口特有的須要傳遞的參數，參數名和參數值均可以自定義html

三、點擊添加參數能夠增長那行可變參數前端

四、點擊測試，將輸入框中的數據發送到接口中java

五、從接口端返回JSON格式的數據直接打印出來json

 

2、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，方便等下的克隆操做。api

 

3、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>

一、綁定兩個按鈕的click事件跨域

二、$("#add")的click事件是在作克隆操做，克隆的同時將原先兩個輸入框中的內容清除curl

三、$('input[name=api_key]').map在作過濾無效可變參數的操做；有效的可變參數是指參數名和參數值都存在，只有都存在的纔會發送過去

四、$("#submit")經過post給test.php，經過它來發送消息給接口

 

4、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後方便閱讀
?>

一、$root這個域名能夠自定義

二、用curl實現Post請求，可跨域

三、中文返回的是unicode編碼，decode後方便閱讀

 

demo下載：

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