一个js的接口测试器源代码

来源：互联网发布：网络系统编辑：程序博客网时间：2024/05/20 06:30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.6.2.js"></script>
<script>
$(function(){
// 方法定义
var $methodDefine = {
  "calcInstallmentInfo" :
  {
   "reqparam" : ["REQUEST1","REQUEST2","REQUEST3"],
   "resparam" : ["RESPONSE1","RESPONSE2"],
   "defvalue" : ["1","2","3"]
  }
};

//
var $currentMethod;

//
var $url = "http://www.csdn.net";

//
$("#divButton").hide();

//
$("#selectMethod").val("");

//
$("#txtUrl").val($url);

//
$("#selectMethod").change(function(){
$currentMethod = $(this).attr("value");
// alert($currentMethod);

  // remove all input object
  $("#divRequestParameters").empty();
  $("#divResponseParameters").empty();
  $("#divButton").hide();

  //alert($methodDefine);
  //alert(eval("$methodDefine." + $currentMethod));
  if($currentMethod != null && $currentMethod != ""){
   var reqparams = eval("$methodDefine." + $currentMethod + ".reqparam");
   var resparams = eval("$methodDefine." + $currentMethod + ".resparam");
   var defvalues = eval("$methodDefine." + $currentMethod + ".defvalue");

   // reqparam
   $("#divRequestParameters").append("Request:<br/>");
   for(i = 0; i < reqparams.length; i++){
    $("#divRequestParameters").append(reqparams[i] + ": <input id='" + reqparams[i] + "' value='" + defvalues[i] + "' /><br/>");
   }

   // resparam
   $("#divRequestParameters").append("Response:<br/>");
   for(i = 0; i < resparams.length; i++){
    $("#divResponseParameters").append(resparams[i] + ": <input id='" + resparams[i] + "' /><br/>");
   }

   // button
   $("#divButton").show();
  }
});

// clean
$("#btnClean").click(function(){
  $("input:not(#txtUrl)").attr("value","");
});

// reset
$("#btnReset").click(function(){
  var reqparams = eval("$methodDefine." + $currentMethod + ".reqparam");
  var defvalues = eval("$methodDefine." + $currentMethod + ".defvalue");

  // reqparam
  for(i = 0; i < reqparams.length; i++){
   $("#" + reqparams[i]).val(defvalues[i]);
  }

  //
  $("#txtUrl").val($url);
});

// submit
$("#btnSubmit").click(function(){
  var params = "{";
  var reqparams = eval("$methodDefine." + $currentMethod + ".reqparam");
  for(i = 0; i < reqparams.length; i++){
   if(i!=0) params += ",";
   params += "'" + reqparams[i] + "':'" + $("#" + reqparams[i]).val() + "'";
  }
  params += "}";
  //alert(params);

  $.get(
   $("#txtUrl").val(),
   params,
   function(data){
    alert(data);
   },
   null
  );

  $.post(
   $("#txtUrl").val(),
   params,
   function(data){
    alert(data);
   },
   "json"
  );

});
});
</script>
</head>
<body>
<div id="divSelectMethod">
  <select id="selectMethod">
   <option value="">Please select a method!</option>
   <option value="calcInstallmentInfo">calcInstallmentInfo</option>
  </select>
</div>
<div id="divRequestParameters">
</div>
<div id="divResponseParameters">
</div>
<div id="divButton">
  URL: <input id="txtUrl" value="" style="width: 500px;" />
  <br/>
  <button id="btnClean">清空</button>
  <button id="btnReset">重置</button>
  <button id="btnSubmit">提交</button>
</div>
</body>
</html>