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 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Silverlight:Dependency Property(依赖属性)学习笔记

学习SL/WPF,Dependency Properties(依赖属性)是一个全新(陌生)但又无法回避的概念。 http://www.wpftutorial.n...

1947
来自专栏逸鹏说道

Python3 与 C# 并发编程之~ 进程篇中

接着上面继续拓展,补充说说获取函数返回值。 上面是通过成功后的回调函数来获取返回值,这次说说自带的方法:

1213
来自专栏CRPER折腾记

Vue折腾记 - (3)写一个不大靠谱的typeahead组件

typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的typeahead;

731
来自专栏chafezhou

程序员探案之被吃掉的串口数据

1724
来自专栏雨过天晴

原 荐 PHP 在 Console 模式下的

1651
来自专栏我的小碗汤

一个神秘现象引发对beego框架的思考

小强最近在项目中遇到了一个很奇怪的问题:在整改日志规范时,为了避免影响现有的代码结构以及改动尽可能小的前提下,在调用记日志的SDK处将某一个字段值首字母改为大写...

724
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

3.4K5
来自专栏.NET后端开发

Highcharts使用指南

摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文,你将学会如何配置Highcha...

2995
来自专栏大内老A

Model验证系统运行机制是如何实现的?

在前面三篇文章(《ModelValidator》、《ModelValidatorProvider》和《ModelValidatorProviders》)中我们详...

18610
来自专栏抠抠空间

Django之Form表单

Django From简介 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来。 与此同时我们...

3796

扫码关注云+社区