JavaWeb中的表单提交和超链接请求传递参数
1. HTML提交表单
HTML提交表单简单易操作,依靠在<form>标签对中的<input type='submit'>提交按钮进行请求发送和参数提交。其中form标签的post属性决定提交方式是get还是post。
jsp代码
<form action="servlet" method="post">//action后面的就是表单提交后的位置,这里我们提交给servlet来处理,method为提交方式,一般有隐私数据的都用post提交方式,提交的数据超过1024k也需要使用post提交方式。
账号:<input type="text" name="name_user" value="user">//name为属性名字,后面获取数据时一定要与name对应,value为属性值,这里面的值就是你要提交的值,后面获取到的也是这个值。
密码:<input type="password" name="name_pwd" value="pwd">
<input type="submit" value="提交表单">
</form>
servlet根据name属性获取提交的参数
Java代码
import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class servlet extends HttpServlet{public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{request.setCharacterEncoding("utf-8");String username = request.getParameter("name_user");String password = request.getParameter("name_pwd");System.out.println("username"+","+"password");}
}
注意写servlet一定要配置web.xml文件,并且重启服务器。
在服务器端点击提交按钮后,控制台输出结果:
最后输出结果为:user,pwd
2. HTML超链接请求
只使用html发送超链接请求的话,方式比较单一。传递参数值是被写死的,并且只能使用get方式去发送请求。如果不用JavaScript的话,超链接还是作为一个页面跳转按钮比较合适。
jsp代码
<a href="servlet/TestServlet?name_user=aaa&name_pwd=bbb">超链接请求</a>
java代码
import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class servlet extends HttpServlet{public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{request.setCharacterEncoding("utf-8");String username = request.getParameter("name_user");String password = request.getParameter("name_pwd");System.out.println("username"+","+"password");}
}
注意写servlet一定要配置web.xml文件,并且重启服务器。
在服务器端点击提交按钮后,控制台输出结果:
最后输出结果为:aaa,bbb
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>
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"));
JavaWeb中的表单提交和超链接请求传递参数相关推荐
- 表单提交和超链接请求传递参数的几种方式
表单提交和超链接请求传递参数的几种方式 这段时间在使用easy-ui的datagrid,他有自己提交表单的方式,所以就整理整理页面对参数的提交方式: 注:下面代码都已经过测试. 1. HTML提交表单 ...
- form表单、控制器中接收表单提交数据的4种方式
Form表单 这篇文章主要讲的是form表单的提交 之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...
- php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要 腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
- Jquery中实现表单提交前的校验
场景 为了安全,通常要进行前端校验和后端校验. 前端校验一般在表单提交前实现. 实现 form表单元素添加onsubmit事件 <form id="book" action= ...
- Jquery中实现表单提交到SSM后台前进行post请求实现数据的校验
场景 表单中有两个输入框input在提交这个表单前需要对两个输入框进行校验. 即点击提交按钮时会经过校验的方法,此方法会post方式提交到后台,在请求后台成功后的回调方法中会对js变量进行赋值,进而决 ...
- ExtJs中的表单提交和页面弹出表单
1.表单提交 代码: form.jsp页面: <formid="panel22"action="getTest.jsp"method="po ...
- html中form表单提交和阻止表单提交的细节
如何阻止表单提交 HTML禁止表单提交方法 源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...
- 【JAVA开发中, FROM表单提交List集合时出现下标越界的解决方案】
一丶问题简述 在接口对接中, 因前端使用的From表单提交方式, 后台接收为List集合, 在数据量大于256条时, 出现下标越界的问题, 如下图所示: 二丶原因表述 Spring mvc框架封装中, ...
- 在Servlet中处理表单提交的数据
Servlet的主要功能是处理客户端的表单请求数据,在Servlet中首先对这些数据进行验证,可能会封装到JavaBean,接下来调用数据库的业务逻辑方法将数据保存或者进行其他操作,最后Servlet ...
- html如何让a标签提交表单提交,html post请求之a标签的两种用法解析
这篇文章主要介绍了html post请求之a标签的两种用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧 html post请求之a标签的两种用法 ...
最新文章
- Android实现导航菜单左右滑动效果
- 实战CentOS系统部署Hadoop集群服务
- 函数和构造函数的区别
- SQL 快速入门2.1
- android studio1.5 for mac,适用于Mac的Android Studio 1.5.x随机崩溃
- 新政重塑教育格局——中国教育发展报告2021
- 推荐系统实践---第一章:好的推荐系统
- 【竞赛篇-国创(大创)申报书撰写(三大类别七千字总结建议)】国家级大学生创新创业训练计划申报书撰写经验分享
- 微信小程序云开发--数据库使用
- 网页设计 基础知识汇总
- 求偏导c语言,求偏导是什么?有什么用法?请举例说明。
- C语言趣味题:猜数字游戏(含代码创建思路与过程)
- android软键盘enter键
- 世界上第一代电子计算机取名为,计算机应用基础知识计算机应用基础试题及答案...
- mysql如何插入图片和视频_mysql中怎样插入图片
- android flutter 项目对接友盟AppTrack 以及今日头条投放
- svn拉取文件合并_svn常用命令——-自用——-持续更新中 | 学步园
- 利用http://forshare.me/qq/访问陌生人的QQ空间_三木_新浪博客
- html中加一个空行,浅谈HTML代码中的空格和空行
- JSONObject转对象、集合、数组