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

转载 2017年06月27日 09:55:30

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

这段时间在使用easy-ui的datagrid,他有自己提交表单的方式,所以就整理整理页面对参数的提交方式:

注:下面代码都已经过测试


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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

2. HTML超链接请求

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

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

java代码

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

3. Javascript提交表单

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

javascript代码

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

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

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

javascript代码

function submit_frm(){
            var frm = document.getElementById("test");  
            frm.action = "servlet/TestServlet";  
            frm.method = "post";                 
            frm.submit();                        
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

java代码

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

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>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

注意: 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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

java代码

String username = request.getParameter("username");
String password = request.getParameter("password");
  • 1
  • 2
  • 1
  • 2

5. jQuery提交表单

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

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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

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();
    }); 

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

java代码

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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);
   });

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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");
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

注意:

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

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

request.getParameterValues("param_name");

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

request.getParameter("param_name");

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

var json_str = JSON.stringify(json_object);

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

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>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

注意: 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);
    });

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

java代码

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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 : "测试数据"
    });            
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

注意: 在确认使用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"));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

form表单的各种input的submit传值

1.       在服务器端获取参数的时候,HttpServletRequest.getParameter(String name)方法的返回结果根据如下情况区分: 1.1   请求消息中不包含这个...
  • hacker_Lees
  • hacker_Lees
  • 2017年03月13日 16:48
  • 2935

a标签的带参传值和form表单的带参

1、标签带参——参数固定 我们带参一般都是因为参数有特殊的作用或其他的作用,所以取参数就成为了关键的一步 在jsp页面的取参 ;在另一个jsp页面获取值${param.name}或req...
  • hnczlzj
  • hnczlzj
  • 2016年12月14日 22:26
  • 5849

GET和POST请求中,url中的参数和form表单中的参数怎么区分

在和web前端开发过程中,经常会遇到使用form表单提交POST请求和GET请求。 一般GET请求格式如下: http://xxx../path?key1=value1&key2=value2 而...
  • helloYang121
  • helloYang121
  • 2017年03月23日 21:36
  • 1209

form表单—3种参数

form表单往后台传递的3种参数:基本类型的参数;自定义实体类(字段都是基本类型);自定义实体类(包含另一个自定义实体类字段)...
  • dreamstar613
  • dreamstar613
  • 2016年12月15日 10:54
  • 1851

四种方案解决Form之间相互访问、参数传递的问题

四种方案解决Form之间相互访问、参数传递的问题       /* ******************************************************************...
  • yumanqing
  • yumanqing
  • 2006年10月13日 14:12
  • 5758

表单(form)的提交实现参数页面间的传递

表单(form)的提交实现参数页面间的传递   在介绍表单传递参数的内容之前,先来了解一些预备知识。表单的提交方式和请求报文中对汉字的处理。   表单的提交方式:   通常使用的表单的提交方式主...
  • u013117006
  • u013117006
  • 2013年12月16日 16:47
  • 5182

JQuery.form表单提交参数详解

ajaxForm()和ajaxSubmit()方法可以接受0个或1个参数,当为单个参数时,该参数可以是一个回调函数,也可以是一个options对象。以下是一个options对象. var optio...
  • tianyacao8025
  • tianyacao8025
  • 2011年12月15日 10:18
  • 5079

利用表单传递参数实例

代码如下     接受参数页面               姓名:           电话:                            打印页面  ...
  • h14525544
  • h14525544
  • 2017年09月27日 22:02
  • 91

超链接 a href 提交表单通过post方式

我们知道超链接一般是通过get方式提交表单的,如下列子: 首页 如果想用超链接post这个表单该怎么做呢,请看下面: 首页...
  • winter13292
  • winter13292
  • 2012年09月06日 13:43
  • 56145

post、get提交方式,超链接中文乱码

中文乱码问题 1.辅文 (1)乱码的原因 字符集的冲突问题 (2)乱码的来源 A:请求乱码 在用户请求中的中文出现的乱码 B:响应乱码 在响应信息中的中文出现的乱码 C:数据库乱码 数据库中有中文产生...
  • lj_1129
  • lj_1129
  • 2013年12月16日 11:13
  • 1533
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表单提交和超链接请求传递参数的几种方式
举报原因:
原因补充:

(最多只允许输入30个字)