表单提交和超链接请求传递参数的⼏种⽅式
表单提交和超链接请求传递参数的⼏种⽅式
这段时间在使⽤easy-ui 的datagrid ，他有⾃⼰提交表单的⽅式，所以就整理整理页⾯对参数的提交⽅式：
注：下⾯代码都已经过。
1. HTML 提交表单
HTML 提交表单简单易操作，依靠在<form>标签对中的<input type='submit'>提交按钮进⾏请求发送和参数提交。其中form 标签的post 属性决定提交⽅式是get 还是post 。
jsp 代码servlet 或者action 根据name 属性获取提交的参数
代码2. HTML 超链接请求
只使⽤html 发送超链接请求的话，⽅式⽐较单⼀。传递参数值是被写死的，并且只能使⽤get ⽅式去发送请求。如果不⽤的话，超链接还是作为⼀个页⾯跳转按钮⽐较合适。
jsp 代码java 代码3. Javascript 提交表单
使⽤和html 提交表单的话就可以灵活很多，因为js 不仅有针对页⾯很多的触发事件，⽽且可以获取到html 页⾯元素的信息。看⼀下⼏个简单的例⼦。
3.1 form 表单提交前触发事件
这⾥主要是介绍下在提交form 表单之前的onsubmit 事件，在很早以前学习的时候，这个事件会被作为⽤户输⼊数据校验的⼊⼝。不过仍然因为js 使html 页⾯的灵活性变⾼，这种前端校验⽤户输⼊的⽅式也不是那么唯⼀。
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
5String username = Parameter("name_user");String password = Parameter("name_pwd");
1
2<a href ="servlet/TestServlet?name_user=aaa&name_pwd=bbb">超链接请求</a >
1String username = Parameter("name_user");String password = Parameter("name_pwd");
1
2
代码在test_onsubmit()函数中，可以选择进⾏任意其他操作，包括设置post 还是get ⽅式去提交表单，或者说获取⽤户输⼊内容，对其内容进⾏前端校验。
java 代码3.2 使⽤button 或者超链接标签提交表单
使⽤button 或者超链接去提交表单的话，主要是利⽤onclick 触发事件去调⽤⼀个js 函数，然后在函数中去进⾏表单提交。这时候就不需要<input type='submit'>标签去提交表单了。
jsp 代码注意： a 标签的href 属性必须设置为#，因为a 标签默认会发⽣跳转。
javascript 代码java 代码4. Javascript 超链接请求
<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
function test_onsubmit (){ alert("提交表单前先进⼊到这个js 函数"); //使⽤js 获取到id 为test 的这个表单 var frm = ElementById("test"); //设置这个表单的提交路径 frm.action = "servlet/TestServlet"; //设置这个表单提交的⽅式 hod = "post"; //提交表单 frm.submit(); }
1
2
3
4
5
6
7
8
9
10
11String username = Parameter("name_user");String password = Parameter("name_pwd");
1
2<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
8function submit_frm (){ var frm = ElementById("test"); frm.action = "servlet/TestServlet"; hod = "post"; frm.submit(); }
1
2
3
4
5
6String username = Parameter("name_user");String password = Parameter("n
ame_pwd");
1
2
使⽤js 去处理html 的超链接请求时，就可以动态的设置传递参数，以及传递参数的数值。由于<a>标签请求的提交需要window.location 对象，提交超链接请求仍是get ⽅式。
注意： 直接使⽤js ，也可以将超链接请求参数提交⽅式修改为post ，由于中封装的要好很多，这⾥就不记了。可以看到实现。
jsp 代码注意： a 标签的href 属性必须设置为#，因为a 标签默认会发⽣跳转。
javascript 代码java 代码5. jQuery 提交表单
提交表单有两种，第⼀种就是只提交表单中的内容，没有额外数据提交，这种⽐较简单。还有⼀种就是不仅提交表单的内容，⽽且增加⼀些额外的参数与表单内容⼀起提交。
5.1 只提交表单内容
jsp 代码jQuery 代码
账号:<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
3function submit_a (){ //获取⽤户输⼊的值 var username = ElementById("id_user").value; var password = ElementById("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
10String username = Parameter("username");String password = Parameter("password");
1
2<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
注意：这⾥写法就很灵活，⽐如⽤bind 去创建click 事件，⽤其他的html 标签触发事件，获取表单中的⽤户输⼊数据之类进⾏处理什么的都可以。
java 代码5.2 提交表单以及额外内容
这种提交⽅式就是所有表单提交和超链接请求中最为灵活的提交⽅式了，也是⽬前做的项⽬中最常见的页⾯提交⽅式。
jsp 代码jQuery 代码
$(document).ready(function (){ //创建id 为sub_jQuery 的button 的单击事件 $("#sub_jQuery").click(function (){ //设置表单id 为test 的请求路径和⽅式 $("#test").attr("actio
n","servlet/TestServlet"); $("#test").attr("method","post"); //提交id 为test 的表单 $("#test").submit(); }); });
1
2
3
4
5
6
7
8
9
10
11
12String username = Parameter("name_user");String password = Parameter("name_pwd");
1
2<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$(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
html中提交表单用什么属性17
18
19
20
21
java 代码注意：
1. 这⾥写的这个⼩例⼦中，对于表单外的参数提交是靠拼接url 完成的。
2. 这个checkbox 主要是作为个js 数组参数传递的⽰例，不同于在form 表单中提交的checkbox ，后台java 获取数组的⽅式是：
然⽽拼接成url 之后，后台获取⽅式变成了字符串获取，得到的是带逗号分隔的数组字符串数值，那么后台java 获取只能是：
3. 在现在做的项⽬中，既然拼接字符串⽆法传递数组给后台，所以正常都传递JSON 字符串。页⾯创建的JSON 对象转化为字符串，然后后台通过JSON 的解析包去解析。千万别忘了js 转换JSON 对象为字符串:
var json_str = JSON.stringify(json_object);
4. 针对$.post( )函数，详细的可以看看。
jQuery 超链接请求
jQuery 对超链接请求的操作，就有点像上⾯这个提交表单和额外参数的demo ，不过因为没有表单，所以超链接请求提交的参数都是额外的参数，或者说是任意想要提交的参数。
jsp 代码注意： a 标签的href 属性必须设置为#，因为a 标签默认会发⽣跳转。
jQuery 代码java 代码 String username = Parameter("name_user"); String password = Parameter("name_pwd"); String pValue = Parameter("url_p"); String urlCheck = Parameter("url_check");
1
2
3
4账号:<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$(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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论