标签:
前端时间给手机客户端做接口,当时弱爆了,写完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部分
client_name:
client_version:
api_debug:
url:
:
这里做了点简单的修改,高度,宽度等。可变参数那行只用了name属性,分别是api_key和api_value,方便等下的克隆操作。
三、JavaScript部分
var$parent =$(this).parent();
var$clone =$parent.prev().clone();
$clone.find(‘:text‘).val(‘‘);
$clone.insertBefore($parent);
});
$("#submit").click(function() {
varapi_keys ={
api_debug:$(‘input[name=api_debug]‘).val(),
client_url:$(‘input[name=client_url]‘).val()
};
$(‘input[name=api_key]‘).map(function() {
varkey =$.trim($(this).val());
varvalue =$.trim($(this).next().val());
varrepeat ={};
if(key != ‘‘) {
repeat[key] =value;
api_keys =$.extend(api_keys, repeat);
}
});
//提交到test文件中
$.post(‘test.php‘, api_keys, function(data) {
$("#message").html(data);
});
});
1、绑定两个按钮的click事件
2、$("#add")的click事件是在做克隆操作,克隆的同时将原先两个输入框中的内容清除
3、$(‘input[name=api_key]‘).map在做过滤无效可变参数的操作;有效的可变参数是指参数名和参数值都存在,只有都存在的才会发送过去
4、$("#submit")通过post给test.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下载:
标签: