前端时间给手机客户端做接口，当时弱爆了，写完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是每个接口的地址

立即学习“PHP免费学习笔记（深入）”；

2、一行两个输入框的地方是可变参数，就是每个接口特有的需要传递的参数，参数名和参数值都可以自定义

3、点击添加参数可以增加那行可变参数

4、点击测试，将输入框中的数据发送到接口中

5、从接口端返回JSON格式的数据直接打印出来

二、html部分

<span><</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>　　　　 <</span><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><</span><span>label </span><span>class</span><span>="title"</span><span>></span>client_name：<span></</span><span>label</span><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><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><</span><span>label </span><span>class</span><span>="title"</span><span>></span>client_version：<span></</span><span>label</span><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><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><</span><span>label </span><span>class</span><span>="title"</span><span>></span>api_debug：<span></</span><span>label</span><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><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><</span><span>label </span><span>class</span><span>="title"</span><span>></span>url：<span></</span><span>label</span><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><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><</span><span>label </span><span>class</span><span>="title"</span><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><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><span>div </span><span>class</span><span>="mb20"</span><span>></span>
            <span><</span><span>label </span><span>class</span><span>="title"</span><span>></</span><span>label</span><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><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><span>div </span><span>id</span><span>="message"</span><span>></</span><span>div</span><span>></span>

登录后复制

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

三、JavaScript部分

<span><</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>

登录后复制

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

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中存在已记录和未记录的漏洞。这是有意的。鼓励您尝试发现尽可能多的问题。Damn Vulnerable Web A

查看详情

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>
?>

登录后复制

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

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

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

demo下载：

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