一个简单的请求测试页面

因为工作需要，时不时要自己发请求测试数据，然而手头没什么好的请求工具，便自己写了个页面来测试请求，你需要先安装Allow-Control-Allow-Origin: *插件来解决跨域问题，该页面仅解决简单的数据请求，其它需要自行扩展，仅支持get和post请求，作为对象的返回只支持json

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
协议<input type="text" id="prot" value="http"><span style="float:right">gcud</span><br>
url前置<input type="text" id="urlprev" value="www.网址.com/"> <button style="margin-left:10rem" id="send">请求</button><span style="float:right">20180516</span><br>
url后置<input type="text" id="urllast" value=""><br>
请求方式<select id="method">
<option value="get">get</option>
<option value="post">post</option>
</select>
<p>参数 <button id="add">添加参数</button></p>
<div id="pars">
<p class="par"><input type="text" class="key"  value="">:<input class="value" type="text" value=""></p>
<p class="par"><input type="text" class="key"  value="">:<input class="value" type="text" value=""></p>
<p class="par"><input type="text" class="key"  value="">:<input class="value" type="text" value=""></p>
<p class="par"><input type="text" class="key"  value="">:<input class="value" type="text" value=""></p>
<p class="par"><input type="text" class="key"  value="">:<input class="value" type="text" value=""></p>
</div>
<p>返回结果</p>
<div id="result"></div>
<script>
$('#send').click(function(){
var resulthtml=$('#result')
resulthtml.text('请求中')
var data={}
$('.par').each(function(){
var key=$(this).find('[class="key"]').val()
var value=$(this).find('[class="value"]').val()
if(key!=''){
data[key]=value
}
})
var url=$('#prot').val()+'://'+$('#urlprev').val()+$('#urllast').val()
$.ajax({
   type: $('#method').val(),
   url: url,
   data: data,
   success: function(msg){
   if(typeof msg=='object'){
   msg=JSON.stringify(msg)
   }
     resulthtml.text(msg)
   
   },
   error:function(){
   resulthtml.text('请求失败')
   }
});
})
$('#add').click(function(){
var htmltemplate='<p class="par"><input type="text" class="key"  value="">:<input class="value" type="text" value=""></p>'
$('#pars').append(htmltemplate)
})
</script>

将代码保存为html文件即可，随便在哪里打开，记得Allow-Control-Allow-Origin: *要开允许访问文件网址，最好隐身模式下启用也开着，然后就随便用吧

以下是官方吐槽时间

啥？！没有标题？自己加吧，也就一行代码的事

啥？！太丑了？自己用bootstrap改样式就行了

啥？！这年头还有用jq写的，真low!对，是我的错，我应该自己用原生js造轮子来彰显高大上，wkqnmdb!

啥？！不支持DELETE,OPTION,PUT请求？自己改，不想说什么

啥？!不能自适应？自己改，自己改

啥？！返回字符串过长挤到页面右边？自己拉一下滚动条会die？

一个简单的请求测试页面

猜你喜欢