zoukankan      html  css  js  c++  java
  • javascript jquery ajax动态提交多个参数 api测试 拂晓风起

    为了方便自己测试rest api,所以做了一个动态参数的页面。大家有需要的话,就各取所需吧。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>API测试</title>
    <script type="text/javascript" src="../script/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="../script/jquery.autocomplete.min.js"></script>

    <link rel="stylesheet" href="../script/jquery.autocomplete.css" type="text/css" />

    <script type="text/javascript">

    function addOne() {
    $(
    "#diy").append('<p>参数名:<input type="text" class="parameterName"/> 参数值:<input type="text" class="parameterValue"/></p>');
    }

    function submitForm() {
    var returnData = document.getElementById("phpRadio").checked ? "php":"json";
    var method = document.getElementById("getRadio").checked ? "get":"post";
    var action = "../api/"+$("#action").val();
    alert(action)
    var formData = new Object();
    var allParameters = $(".parameter");
    for(var i=0;i<allParameters.length;i++){
    formData[allParameters[i].name]
    = allParameters[i].value;
    }
    var allDiyParameterNames = $(".parameterName");
    var allDiyParameterValues = $(".parameterValue");
    for(var i=0;i<allDiyParameterNames.length;i++){
    formData[allDiyParameterNames[i].value]
    = allDiyParameterValues[i].value;
    }
    if(method == 'get'){
      $.get(action, formData,
    function(data){
      //

      }, returnData);
              }
    }
    </script>
    </head>
    <body>
    <div style="float:left;" >
    <form id="form1" method="post" target="_blank" onsubmit="action1()" enctype="multipart/form-data">
    <p>类/方法:<input type="text" id="action"/>如:user/show</p>
    <p>传递方法:<input type="radio" id="getRadio" name="getPost" checked="true" /><label for="getRadio">GET </label>
    <input type="radio" name="getPost" id="postRadio"/><label for="postRadio">POST</label></p>
    <p>返回数据格式:<input type="radio" id="phpRadio" name="returnData" checked="true" /><label for="phpRadio">php </label>
    <input type="radio" name="returnData" id="jsonRadio"/><label for="jsonRadio">json</label></p>
    <p>sig:<input type="text" class="parameter" name="sig" />
    id:
    <input type="text" class="parameter" name="id" /></p>
    <p>sid:<input type="text" class="parameter" name="sid" />
    mid:
    <input type="text" class="parameter" name="mid" /></p>
    <div id="diy">
    <input type="button" onclick="addOne()" style="100px;height: 30px;" value="添加字段"/>
    </div>

    <input type="button" onclick="submitForm()" style="200px;height: 30px;" value="提交"/>
    <input type="reset" style="100px;height: 30px;" value="清空"/>
    </form>
    </div>
    <div style="float:right;">
    返回结果:
    <br><textarea id="result" rows="10" style="500px;"></textarea>
    </div>
    </body>
    </html>
  • 相关阅读:
    JAVA编程-------29、求3*3矩阵对角线元素之和
    JAVA编程---------28、对10个数进行排序(冒泡排序)
    JAVA编程-------------27、100以内的素数
    JAVA编程----------26、请输入星期几的第一个字母来判断一下星期几, 第一个字母相同,则判断第二个字母,以此类推
    JAVA编程-----------25、查找5位数的回文数
    JAVA编程---------24、输入一个数,判断位数,并逆序输出
    JAVA编程------------23、递归
    JAVA编程------------22、利用递归求5!
    JAVA编程--------21、求1!+2!+....+20!=
    JAVA编程------------20、计算2/1+3/2+5/3+8/5+...求前20项之和
  • 原文地址:https://www.cnblogs.com/kenkofox/p/2156373.html
Copyright © 2011-2022 走看看