一個簡單的請求測試頁面 原

因爲工作需要，時不時要自己發請求測試數據，然而手頭沒什麼好的請求工具，便自己寫了個頁面來測試請求，你需要先安裝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？