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

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

这段时间在使用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>

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

java代码

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

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

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>

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

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

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

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>

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

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

注意：

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>

注意： 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");

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

第一次写博客，也是第一次用markdown编辑器，上面写的内容如有错误或者不全面，望看到博文的大神指正。