备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2017-11-10 1639
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 表单提交和超链接请求传递参数的几种方式转载 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_
目录
相关文章
祈澈菇凉
|
5月前
uniapp带参数跳转，新页面接收参数
uniapp带参数跳转，新页面接收参数
祈澈菇凉
109 0
会敲代码的_TT
|
2月前
|
Web App开发 移动开发 前端开发
GET与POST的区别：为什么GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留？
欢迎来到前端入门之旅！
会敲代码的_TT
51 1
王同学睡醒了
|
4月前
POST请求传递参数（十一）
POST请求传递参数（十一）
王同学睡醒了
37 0
祈澈菇凉
|
5月前
|
JavaScript
jQuery带参跳转新页面，新页面获取url多个参数的办法
jQuery带参跳转新页面，新页面获取url多个参数的办法
祈澈菇凉
25 0
讓丄帝愛伱
|
5月前
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
讓丄帝愛伱
41 0
讓丄帝愛伱
|
5月前
|
前端开发
a标签以post方式提交
a标签以post方式提交
讓丄帝愛伱
32 0
迪_迦
|
8月前
|
小程序 数据安全/隐私保护
小程序封装form表单
本文主要介绍了如何封装一个表单组件，在封装表单组件时，我们需要定义组件属性和方法、组件模板和组件样式，以确保组件能够在页面中正常使用。通过本文的介绍，希望能够更好地帮助大家理解表单组件的封装方式，并在实际项目中应用。
迪_迦
137 0
是小鱼儿哈
|
12月前
|
前端开发 Java API
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（上）
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（上）
是小鱼儿哈
135 0
是小鱼儿哈
|
12月前
|
JSON 前端开发 数据格式
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（下）
SpringMVC学习笔记（获取参数，传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交））（下）
是小鱼儿哈
79 0
前端精髓
|
JSON 前端开发 JavaScript
表单提交类型
关于提交表单的属性
前端精髓
73 0
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4