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="width:100px;height: 30px;" value="添加字段"/>
                </div>

                <input type="button" onclick="submitForm()" style="width:200px;height: 30px;" value="提交"/>
                <input type="reset" style="width:100px;height: 30px;" value="清空"/>
            </form>
        </div>
        <div style="float:right;">
            返回结果:<br><textarea id="result" rows="10" style="width:500px;"></textarea>
        </div>
    </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知识分享

1-STM32嵌入LUA开发(控制小灯闪耀)

今天因为想让STM32完美的处理字符串,所以就想着让STM32嵌入lua,本来想用f103c8t6,但是一编译就提示内存不足......

512
来自专栏技术博客

C# XML与Json之间的相互转换

对于这转换其实很简单,其中最重要的就是先要引用类库。可以到官网进行下载引用http://json.codeplex.com。

783
来自专栏Android 研究

APK安装流程详解4——安装中关于so库的那些事

不同的Android手机使用不同的CPU,因此支持不同的指令集。CPU与指令集的每种组合都有其自己的应用二进制接口(或ABI)。"ABI"精确定义了"运行时,应...

941
来自专栏菜鸟计划

angularjs 表单验证

一、常用的表单验证指令  1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="te...

2857
来自专栏

socket读写返回值的处理

在调用socket读写函数read(),write()时,都会有返回值。如果没有正确处理返回值,就可能引入一些问题 总结了以下几点 1当read()或者writ...

1915
来自专栏Python

Flask快速入门,知识整理

一、Flask介绍(轻量级的框架,非常快速的就能把程序搭建起来)   Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服...

3209
来自专栏小灰灰

linux下socket编程

Socket soket接口是TCP/IP网络的API。网络的socket数据传输是一种特别的I/O,socket也是一种文档描述符。利用socket()函数...

1877
来自专栏用户2442861的专栏

高性能网络编程3----TCP消息的接收

这篇文章将试图说明应用程序如何接收网络上发送过来的TCP消息流,由于篇幅所限,暂时忽略ACK报文的回复和接收窗口的滑动。

831
来自专栏老码农专栏

AAA - ActFramework的安全框架II - 应用

1302
来自专栏IMWeb前端团队

简单的实现Javascript的MVC

最近看了一篇文章,“30行代码实现Javascript中的MVC”,原文链接:http://www.jqsite.com/notes/1603205925.ht...

3627

扫码关注云+社区