前端时间给手机客户端做接口，当时弱爆了，写完API接口后，也不怎么测试，最后是等客户端调用的时候检验API的正确性。后面利用PHP的curl实现Post请求，检验API接口的正确性；配合前面做的一个查看Apache错误日志的小工具，可将将错误一览无余；利用firebug

前端时间给手机客户端做接口，当时弱爆了，写完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部分

<span><span>style </span><span>type</span><span>="text/css"</span><span>></span><span>
        .mb20</span><span>{</span><span>margin-bottom</span><span>:</span><span>20px</span><span>}</span><span>
        .title</span><span>{</span><span>display</span><span>:</span><span>inline-block</span><span>;</span><span>width</span><span>:</span><span>150px</span><span>;</span><span>text-align</span><span>:</span><span>right</span><span>}</span><span>
        .w100</span><span>{</span><span>width</span><span>:</span><span>100px</span><span>}</span><span>
        .mr10</span><span>{</span><span>margin-right</span><span>:</span><span>10px</span><span>}</span>
<span></span><span>style</span><span>></span></span>

Copy after login

<span>　　　　 <span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><span>label </span><span>class</span><span>="title"</span><span>></span>client_name：<span></span><span>label</span><span>><span>input </span><span>name</span><span>="client_name"</span><span> type</span><span>="text"</span><span> value</span><span>="ANDROID"</span><span>/></span>
        <span></span><span>div</span><span>></span>
        <span><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><span>label </span><span>class</span><span>="title"</span><span>></span>client_version：<span></span><span>label</span><span>><span>input </span><span>name</span><span>="client_version"</span><span> type</span><span>="text"</span><span> value</span><span>="4.0"</span><span>/></span>
        <span></span><span>div</span><span>></span>
        <span><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><span>label </span><span>class</span><span>="title"</span><span>></span>api_debug：<span></span><span>label</span><span>><span>input </span><span>name</span><span>="api_debug"</span><span> type</span><span>="text"</span><span>  value</span><span>=""</span><span>/></span>
        <span></span><span>div</span><span>></span>
        <span><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><span>label </span><span>class</span><span>="title"</span><span>></span>url：<span></span><span>label</span><span>><span>input </span><span>name</span><span>="client_url"</span><span> type</span><span>="text"</span><span> value</span><span>=""</span><span>/></span>
        <span></span><span>div</span><span>></span>
        <span><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><span>label </span><span>class</span><span>="title"</span><span>><span>input </span><span>name</span><span>="api_key"</span><span> type</span><span>="text"</span><span>  value</span><span>=""</span><span> class</span><span>="w100"</span><span>/></span>：<span></span><span>label</span><span>><span>input </span><span>name</span><span>="api_value"</span><span> type</span><span>="text"</span><span>  value</span><span>=""</span><span>/></span>
        <span></span><span>div</span><span>></span>
        <span><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><span>label </span><span>class</span><span>="title"</span><span>></span><span>label</span><span>><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="测试"</span><span> id</span><span>="submit"</span><span> class</span><span>="mr10"</span><span>/><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="添加参数"</span><span> id</span><span>="add"</span><span>/></span>
        <span></span><span>div</span><span>></span>
        <span><span>div </span><span>id</span><span>="message"</span><span>></span><span>div</span><span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

这里做了点简单的修改，高度，宽度等。可变参数那行只用了name属性，分别是api_key和api_value，方便等下的克隆操作。

三、JavaScript部分

<span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span><span>
            $(</span><span>"</span><span>#add</span><span>"</span><span>).click(</span><span>function</span><span>() {
                </span><span>var</span><span> $parent </span><span>=</span><span> $(</span><span>this</span><span>).parent();
                </span><span>var</span><span> $clone </span><span>=</span><span> $parent.prev().clone();
                $clone.find(</span><span>'</span><span>:text</span><span>'</span><span>).val(</span><span>''</span><span>);
                $clone.insertBefore($parent);
            });
            $(</span><span>"</span><span>#submit</span><span>"</span><span>).click(</span><span>function</span><span>() {
                </span><span>var</span><span> api_keys </span><span>=</span><span> {
                    api_debug:$(</span><span>'</span><span>input[name=api_debug]</span><span>'</span><span>).val(),
                    client_url:$(</span><span>'</span><span>input[name=client_url]</span><span>'</span><span>).val()
                };
                $(</span><span>'</span><span>input[name=api_key]</span><span>'</span><span>).map(</span><span>function</span><span>() {
                    </span><span>var</span><span> key </span><span>=</span><span> $.trim($(</span><span>this</span><span>).val());
                    </span><span>var</span><span> value </span><span>=</span><span> $.trim($(</span><span>this</span><span>).next().val());
                    </span><span>var</span><span> repeat </span><span>=</span><span> {};
                    </span><span>if</span><span>(key </span><span>!=</span> <span>''</span><span>) {
                        repeat[key] </span><span>=</span><span> value;
                        api_keys </span><span>=</span><span> $.extend(api_keys, repeat);
                    }
                });
                </span><span>//</span><span>提交到test文件中</span>
<span>                $.post(</span><span>'</span><span>test.php</span><span>'</span><span>, api_keys, </span><span>function</span><span>(data) {
                    $(</span><span>"</span><span>#message</span><span>"</span><span>).html(data);
                });
            });
</span><span></span><span>script</span><span>></span></span>

Copy after login

1、绑定两个按钮的click事件

2、$("#add")的click事件是在做克隆操作，克隆的同时将原先两个输入框中的内容清除

3、$('input[name=api_key]').map在做过滤无效可变参数的操作；有效的可变参数是指参数名和参数值都存在，只有都存在的才会发送过去

4、$("#submit")通过post给test.php，通过它来发送消息给接口

四、php部分

<span>php 
    </span><span>$root</span> = 'http://api.1ddian.cn/';<span>//</span><span>可自定义域名</span>
    <span>$url</span>= <span>$root</span> . <span>$_REQUEST</span>['client_url'<span>];
    </span><span>//</span><span>用curl实现Post请求，可跨域</span>
    <span>$ch</span> =<span> curl_init();
    curl_setopt(</span><span>$ch</span>, CURLOPT_POST, 1<span>);  
    curl_setopt(</span><span>$ch</span>, CURLOPT_URL, <span>$url</span><span>);  
    curl_setopt(</span><span>$ch</span>, CURLOPT_POSTFIELDS, <span>$_REQUEST</span>);  <span>//</span><span>传送参数</span>
    <span>ob_start</span><span>();  
    curl_exec(</span><span>$ch</span><span>);  
    </span><span>$result</span> = <span>ob_get_contents</span><span>() ;  
    </span><span>ob_end_clean</span><span>();  
    </span><span>print_r</span>(json_decode(<span>$result</span>)); <span>//</span><span>中文返回的是unicode编码，decode后方便阅读</span>
?>

Copy after login

1、$root这个域名可以自定义

2、用curl实现Post请求，可跨域

3、中文返回的是unicode编码，decode后方便阅读

demo下载：

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