AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

表单提交和超链接请求传递参数的几种方式

2017-11-10 1725
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 表单提交和超链接请求传递参数的几种方式转载 http://blog.csdn.net/Sky786905664/article/details/73770785这段时间在使用easy-ui的datagrid，他有自己提交表单的方式，所以就整理整理页面对参数的提交方式：注：下面代码都已经过测试。

表单提交和超链接请求传递参数的几种方式

转载 http://blog.csdn.net/Sky786905664/article/details/73770785
这段时间在使用easy-ui的datagrid，他有自己提交表单的方式，所以就整理整理页面对参数的提交方式：

注：下面代码都已经过测试。

<a name="t1" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t1" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>1. HTML提交表单

HTML提交表单简单易操作，依靠在<form>标签对中的<input type='submit'>提交按钮进行请求发送和参数提交。其中form标签的post属性决定提交方式是get还是post。

jsp代码

<form id="test" action="servlet/testServlet" method="post" name="test_form">
    账号:<input type="text" name="name_user" id="id_user">
    密码:<input type="password" name="name_pwd" id="id_pwd">
    <input type="submit" value="提交表单">
</form>

servlet或者action根据name属性获取提交的参数

Java代码

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t2" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t2" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>2. HTML超链接请求

只使用html发送超链接请求的话，方式比较单一。传递参数值是被写死的，并且只能使用get方式去发送请求。如果不用JavaScript的话，超链接还是作为一个页面跳转按钮比较合适。

jsp代码

<a href="servlet/TestServlet?name_user=aaa&name_pwd=bbb">超链接请求</a>

java代码

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t3" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t3" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>3. Javascript提交表单

使用js和html提交表单的话就可以灵活很多，因为js不仅有针对页面很多的触发事件，而且可以获取到html页面元素的信息。看一下几个简单的例子。

<a name="t4" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t4" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>3.1 form表单提交前触发事件

这里主要是介绍下在提交form表单之前的onsubmit事件,在很早以前学习的时候，这个事件会被作为用户输入数据校验的入口。不过仍然因为js使html页面的灵活性变高，这种前端校验用户输入的方式也不是那么唯一。

jsp代码

<form id="test" onsubmit="test_onsubmit();">
    账号:<input type="text" name="name_user" id="id_user"/>
    密码:<input type="password" name="name_pwd" id="id_pwd"/>
    <input type="submit" value="提交表单">
</form>

javascript代码

function test_onsubmit(){
            alert("提交表单前先进入到这个js函数");
            //使用js获取到id为test的这个表单
            var frm = document.getElementById("test");
            //设置这个表单的提交路径   
            frm.action = "servlet/TestServlet";
            //设置这个表单提交的方式  
            frm.method = "post";
            //提交表单                   
            frm.submit();                        
        }

在test_onsubmit()函数中,可以选择进行任意其他操作，包括设置post还是get方式去提交表单，或者说获取用户输入内容，对其内容进行前端校验。

java代码

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t5" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t5" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>3.2 使用button或者超链接标签提交表单

使用button或者超链接去提交表单的话，主要是利用onclick触发事件去调用一个js函数，然后在函数中去进行表单提交。这时候就不需要<input type='submit'>标签去提交表单了。

jsp代码

<form id="test">
    账号:<input type="text" name="name_user" id="id_user"/>
    密码:<input type="password" name="name_pwd" id="id_pwd"/>
</form>

<input type="button" value="input_button标签" onclick="submit_frm();">   
<button onclick="submit_frm();">button标签</button>    
<a onclick="submit_frm();" href="#">a标签</a>

注意：

a标签的href属性必须设置为#,因为a标签默认会发生跳转。

javascript代码

function submit_frm(){
            var frm = document.getElementById("test");  
            frm.action = "servlet/TestServlet";  
            frm.method = "post";                 
            frm.submit();                        
        }

java代码

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t6" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t6" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>4. Javascript超链接请求

使用js去处理html的超链接请求时，就可以动态的设置传递参数，以及传递参数的数值。由于<a>标签请求的提交需要window.location对象，提交超链接请求仍是get方式。

注意：

直接使用js，也可以将超链接请求参数提交方式修改为post，由于jQuery中封装的要好很多，这里就不记了。点这里可以看到实现。

jsp代码

账号:<input type="text" name="name_user1" id="id_user"/>
密码:<input type="password" name="name_pwd1" id="id_pwd">
<a href="#" onclick="submit_a();">提交这两个参数的值</a>

注意：

a标签的href属性必须设置为#,因为a标签默认会发生跳转。

javascript代码

function submit_a(){
    //获取用户输入的值
    var username = document.getElementById("id_user").value;
    var password = document.getElementById("id_pwd").value;
    //拼接url
    var url = "servlet/TestServlet?";
    url += "username="+username+"&password="+password;
    //重新定位url
    window.location = url;
}

java代码

String username = request.getParameter("username");
String password = request.getParameter("password");

<a name="t7" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t7" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>5. jQuery提交表单

jquery提交表单有两种，第一种就是只提交表单中的内容，没有额外数据提交，这种比较简单。还有一种就是不仅提交表单的内容，而且增加一些额外的参数与表单内容一起提交。

<a name="t8" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t8" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>5.1 只提交表单内容

jsp代码

<form id="test">
    账号:<input type="text" name="name_user" id="id_user"/>
    密码:<input type="password" name="name_pwd" id="id_pwd"/>
</form>
<button id="sub_jQuery">jQuery</button>

jQuery代码

$(document).ready(function(){

    //创建id为sub_jQuery的button的单击事件   
    $("#sub_jQuery").click(function(){
        //设置表单id为test的请求路径和方式
        $("#test").attr("action","servlet/TestServlet");
        $("#test").attr("method","post");
        //提交id为test的表单
        $("#test").submit();
    }); 

});

注意：

这里写法就很灵活，比如用bind去创建click事件，用其他的html标签触发事件，获取表单中的用户输入数据之类进行处理什么的都可以。

java代码

String username = request.getParameter("name_user");
String password = request.getParameter("name_pwd");

<a name="t9" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t9" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>5.2 提交表单以及额外内容

这种提交方式就是所有表单提交和超链接请求中最为灵活的提交方式

了，也是目前做的项目中最常见的页面提交方式。

jsp代码

<form id="test">
    账号:<input type="text" name="name_user" id="id_user">
    密码:<input type="password" name="name_pwd" id="id_pwd">
</form>

<p id="id_p" name="name_p">p标签中的内容</p>
<p><input type="checkbox" name="name_checkbox" value="A">A选项</p>
<p><input type="checkbox" name="name_checkbox" value="B">B选项</p>
<p><input type="checkbox" name="name_checkbox" value="C">C选项</p>
<button id="sub_jQuery">jQuery</button>

jQuery代码

$(document).ready(function(){

    //创建id为sub_jQuery的button的单击事件   
    $("#sub_jQuery").bind("click",function(){
        //获取表单外的段落内容和checkbox复选框的选中值
        var p_value = $("#id_p").html();
        var check_value = [];       
        $("input[name='name_checkbox']:checked").each(function(){
            check_value.push($(this).val());
        });
        //将id为test的表单提交的input参数进行序列化
        var form_value = $("#test").serialize();
        //拼接提交的路径
        var url = "servlet/TestServlet";
        //将表单外的提交内容拼接到路径中
        url += "?url_p="+p_value+"&url_check="+check_value;
        //使用post方式提交表单以及额外的参数
        $.post(url,form_value);
   });

});

java代码

    String username = request.getParameter("name_user");
    String password = request.getParameter("name_pwd");
    String pValue = request.getParameter("url_p");
    String urlCheck = request.getParameter("url_check");

注意：

这里写的这个小例子中，对于表单外的参数提交是靠拼接url完成的。

这个checkbox主要是作为个js数组参数传递的示例，不同于在form表单中提交的checkbox，后台java获取数组的方式是：

request.getParameterValues("param_name");

然而拼接成url之后，后台获取方式变成了字符串获取，得到的是带逗号分隔的数组字符串数值，那么后台java获取只能是：

request.getParameter("param_name");

在现在做的项目中，既然拼接字符串无法传递数组给后台，所以正常都传递JSON字符串。页面创建的JSON对象转化为字符串，然后后台通过JSON的解析包去解析。千万别忘了js转换JSON对象为字符串:

var json_str = JSON.stringify(json_object);

针对$.post( )函数，详细的可以看看这里。

<a name="t10" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t10" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>jQuery超链接请求

jQuery对超链接请求的操作，就有点像上面这个提交表单和额外参数的demo，不过因为没有表单，所以超链接请求提交的参数都是额外的参数，或者说是任意想要提交的参数。

jsp代码

账号:<input type="text" name="name_user" id="id_user">
密码:<input type="password" name="name_pwd" id="id_pwd">
<a href="#" id = "id_a">jQuery提交这两个input的值</a>

注意：

a标签的href属性必须设置为#,因为a标签默认会发生跳转。

jQuery代码

$(document).ready(function(){

    //创建id为id_a的超链接标签单击事件
    $("#id_a").bind("click",function(){
        //获取想要传递参数的数值
        var url_user = $("#id_user").val();
        var url_pwd = $("#id_pwd").val();
        //拼接url
        var url = "servlet/TestServlet?";
        url += "url_user="+url_user+"&url_pwd="+url_pwd;
        //使用post方式提交请求和参数
        $.post(url);
    });

});

java代码

String username = request.getParameter("url_user");
String password = request.getParameter("url_pwd");

<a name="t11" style="box-sizing: border-box; color: rgb(79, 161, 219); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a><a target="_blank" name="t11" style="box-sizing: border-box; color: rgb(12, 137, 207); text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; outline: none; background: transparent;"></a>easy-ui的datagrid请求提交

这里写一个简单datagrid的提交，在datagrid的提交中，由于又有一层封装好的方法，所以使用起来更为简单明了。

jsp代码

    <div style="height:340px;">
        <table id="id_table" fit="true"></table>
    </div>
    <div id="footer" style="padding:4px;text-align:right">
        查询条件1:<input type="text" id="id_queryparams_1">
        查询条件2:<input type="text" id="id_queryparams_2">
        <a href="#" class="easyui-linkbutton" onclick="querydata();">提交查询条件</a>
     </div>

jQuery代码

$(document).ready(function(){
    //创建datagrid数据表格
    $('#id_table').datagrid({
        loadMsg:'正在加载...',
        url: '',
        //使用datagrid的分页功能
        pagination: true,
        pageSize: 10,
        pageList: [10, 15, 20, 25, 30],
        fit:true,
        rownumbers:true,
        striped:true,
        toolbar:'#c',
        showFooter:true,
        singleSelect:true,
        checkOnSelect: true,
        selectOnCheck:true,
        //测试显示的数据域名称，不用关心
        columns:[[
            {field:'sid',title:'sid',checkbox:true},
            {field:'producer',title:'PRODUCER'},
            {field:'drug_code',title:'DRUG_CODE'},
            {field:'drug_name',title:'DRUG_NAME'},
            {field:'act_quanity',title:'ACT_QUANIYT'},
            field:'drug_name',title:'DRUG_NAME'}
            ]]
        });

});

function querydata(){
    //获取用户输入的数据     
    var query_params1 = $("#id_queryparams_1").val();
    var query_params2 = $("#id_queryparams_2").val();      
    //设置提交的路径
    $("#id_table").datagrid("options").url="servlet/TestServlet";
    //提交请求-也就是给datagrid加载数据     
    $('#id_table').datagrid('load',{
        //提交获取的参数
        query_params_dg_1 : query_params1,
        query_params_dg_2 : query_params2,
        comments : "测试数据"
    });            
}

注意：

在确认使用datagrid的分页功能之后，也就是pagination的属性为true，提交参数时，easy-ui会多封装2个参数传递到后台。分别是page（当前第几页）和rows（每页记录数）。

java代码

String qp1 = request.getParameter("query_params_dg_1");
String qp2 = request.getParameter("query_params_dg_2");
String comments = request.getParameter("comments");
//获取datagrid当前第几页
int page = Integer.parseInt(request.getParameter("page"));
//获取datagrid每页记录数
int rows = Integer.parseInt(request.getParameter("rows"));
文章标签：
JavaScript
Java
前端开发
数据安全/隐私保护
数据格式
JSON
jslin_
目录
相关文章
乐多_L
|
3月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
乐多_L
31 1
AokSend接口-API
|
4月前
|
前端开发 JavaScript API
网页自动提交Form表单的方法
在数字化时代，自动化任务如网页自动提交Form表单，能大幅提升效率。这涉及自动填写注册信息等场景。本文概述了多种实现方式：JavaScript可直接在前端自动填充并提交；Python结合Selenium模拟真实用户操作；AOKSend作为API工具发送表单数据；第三方工具如iMacros、AutoHotkey和Zapier提供非编程自动化选项。根据需求选择合适方法，可显著提升工作效能，减少重复性劳动。
AokSend接口-API
363 1
祈澈菇凉
|
12月前
uniapp带参数跳转，新页面接收参数
uniapp带参数跳转，新页面接收参数
祈澈菇凉
253 0
会敲代码的_TT
|
6月前
|
Web App开发 移动开发 前端开发
GET与POST的区别：为什么GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留？
欢迎来到前端入门之旅！
会敲代码的_TT
142 1
王同学睡醒了
|
11月前
POST请求传递参数（十一）
POST请求传递参数（十一）
王同学睡醒了
58 0
讓丄帝愛伱
|
前端开发
a标签以post方式提交
a标签以post方式提交
讓丄帝愛伱
119 0
迪_迦
|
小程序 数据安全/隐私保护
小程序封装form表单
本文主要介绍了如何封装一个表单组件，在封装表单组件时，我们需要定义组件属性和方法、组件模板和组件样式，以确保组件能够在页面中正常使用。通过本文的介绍，希望能够更好地帮助大家理解表单组件的封装方式，并在实际项目中应用。
迪_迦
209 0
阿里云叶秋
html如何携带参数自动跳转页面
最近有一个项目，跳转页面的时候，不能让用户点击跳转，只能是页面A 自动跳转到页面B，并需要把页面A 的 用户Id ：userId ，传递给页面 B。然后在页面B 内 根据传递过来的 用户Id userId 来进行操作：比如页面的刷新之类的。
阿里云叶秋
418 1
html如何携带参数自动跳转页面
是小鱼儿哈
|
前端开发 Java API
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（上）
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（上）
是小鱼儿哈
177 0
是小鱼儿哈
|
JSON 前端开发 数据格式
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（下）
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（下）
是小鱼儿哈
116 0