1、表单的确认
• 客户端确认
– 减少服务器负载
– 缩短用户等待时间
– 兼容性难
• 服务器端确认
– 统一确认
– 兼容性强
– 服务器负载重
2、JSP与客户机的交互
• 从表单中获得参数
• 返回参数
• 表单的服务器端确认
3、从表单中获得参数
• JSP通过request内置对象获取表单信息
• 用不同的方法获取不同种类的信息
• 获取参数的主要方法：
– getParameter() 获取参数的值
（1）可以获得文本框、文本区域、单选、多选
的值
（2）表单中各元素的name属性是它的唯一标识，用它获取参数。
– getParameterNames() 获取参数的名称
– getParameterValues() 获取多个
4、向客户端输出
• 使用内置对象out
out.println(content)
• 使用“=”
<%= content% >
5、表单的服务器端确认
• 在客户端不能用JSP进行确认
• 分工：数据处理在服务器端
• 实效性：客户端得到服务器确认后表明数
据已经到达服务器
• 客户端兼容性好
• 缺点：加大服务器负载和用户等待时间
6、综合实验（客户端验证）
• 要求(客户端验证):
• 用户名与密码输入不能为空
• 用户名与密码的长度均须在4—10之间
• 性别必须选择(页面初始化时没有选择其中任何一个选项)
• 兴趣的选择数量在1—3之间(最少选择一个,最多选择三个)
• 说明为必填项
• 用户填写不符合要求的需要弹出警告对话框
• 以上要求用javascript验证
• 验证用户的所有输入,完全符合要求的转到显示用户填写信息结果页面
• 如果存在不符合要求的地方则Servlet转到一个jsp页面,页面内容为用户信息中不符合
• 对于服务器端验证不做具体要求,只要实现功能即可,无论采用什么方法都可以,但是必须用Servlet来实现，不可以使用jsp要求的信息
实现效果如下：
新建JSP页面userLogin.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function validate()
{
var username = document.getElementsByName("username")[0];
var password = document.getElementsByName("password")[0];
var gender = document.getElementsByName("gender");
var interest = document.getElementsByName("interest");
var comment = document.getElementsByName("comment")[0];
//如果用户名或密码不符合要求，则弹出对话框
if(username.value.length < 1)
{
alert("用户名不能为空！");
return false;
}
if(password.value.length < 1)
{
alert("密码不能为空！");
return false;
}
if(username.value.length < 4 || username.value.length > 10)
{
alert("用户名长度应该介于4到10之间");
return false;
}
if(password.value.length < 4 || password.value.length > 10)
{
alert("密码长度应该介于4到10之间");
return false;
}
//如果性别没有选择，则弹出对话框
if(!gender[0].checked && !gender[1].checked)
{
alert("性别必须要选择");
return false;
}
//定义标志量n，n为多选框的选择个数
var n = 0;
for(var i = 0; i < interest.length; i++)
{
if(interest[i].checked)
{
n++;
}
}
//判断标志量n是否符合选择的个数要求
if(n < 1)
{
alert("兴趣至少选择一个!");
return false;
}
if(n > 3)
{
alert("兴趣最多选择三个");
return false;
}
//说明部分textarea不能为空
if(comment.value.length < 1)
{
alert("说明必须要填写!");
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validate();">
用户名：<input type="text" name="username"><br>
密 码： <input type="password" name="password"><br>
性别： 男<input type="radio" name="gender" value="男">
女<input type="radio" name="gender" value="女"><br>
兴趣：足球<input type="checkbox" name="interest" value="足球">
篮球<input type="checkbox" name="interest" value="篮球">
排球<input type="checkbox" name="interest" value="排球">
羽毛球<input type="checkbox" name="interest" value="羽毛球"> <br>
地址：
<select name="address">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="天津">天津</option>
</select>
<br>
说明：
<textarea name="comment" rows="15" cols="20"></textarea><br>
<input type="submit" value="点击确认"> <input type="reset" value="重 置">
</form>
</body>
</html>
在性别、兴趣、地址代码段中，需要加入value值，否则服务器无法获取到用户在浏览器中的选中项。
7、综合实验（服务器端验证）
• 要求(客户端验证):
• 用户名与密码输入不能为空
• 用户名与密码的长度均须在4—10之间
• 性别必须选择(页面初始化时没有选择其中任何一个选项)
• 兴趣的选择数量在1—3之间(最少选择一个,最多选择三个)
• 说明为必填项
• 用户填写不符合要求的需要弹出警告对话框
• 验证用户的所有输入,完全符合要求的转到显示用户填写信息结果页面
• 如果存在不符合要求的地方则Servlet转到一个jsp页面,页面内容为用户信息中不符合
• 对于服务器端验证不做具体要求,只要实现功能即可,无论采用什么方法都可以,但是必须用Servlet来实现，不可以使用jsp要求的信息
新建ProcessServlet.java
package com.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ProcessServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.process(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.process(req, resp);
}
protected void process(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
req.setCharacterEncoding("utf-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
String gender = req.getParameter("gender");
String[] interest = req.getParameterValues("interest");
String address = req.getParameter("address");
//编码格式转换，不转换使用utf-8时，中文会存在乱码（原本使用iso-8859-1）
address = new String(address.getBytes("iso-8859-1"), "utf-8");
System.out.println(req);
String comment = req.getParameter("comment");
//list中存放出错原因的所有信息
List<String> list = new ArrayList<String>();
//判断用户名是否符合条件
if(null == username || "".equals(username))
{
list.add("用户名不能为空！");
}
else if (username.length() < 4)
{
list.add("用户名过短！");
}
else if(username.length() > 10)
{
list.add("用户名过长！");
}
//判断密码是否符合条件
if(null == password || "".equals(password))
{
list.add("密码不能为空！");
}
else if(password.length() < 4)
{
list.add("密码过短！");
}
else if(password.length() > 10)
{
list.add("密码过长!");
}
//判断是否选择了性别，若用户没有选择，则gender的值为null
if(null == gender)
{
list.add("性别没有选择!");
}
//判断选择的兴趣点个数是否符合条件
if(null == interest)
{
list.add("兴趣至少选择一个！");
}
else if(interest.length > 3)
{
list.add("兴趣最多选择三个！");
}
//判断是否填写说明
if(null == comment || "".equals(comment))
{
list.add("说明没有填写！");
}
resp.setCharacterEncoding("utf-8");
//如果list为空，则说明没有返回错误信息，转到正确的页面上
if(list.isEmpty())
{
req.setAttribute("username", username);
req.setAttribute("password", password);
req.setAttribute("gender", gender);
req.setAttribute("interest", interest);
req.setAttribute("address", address);
req.getRequestDispatcher("loginSuccess.jsp").forward(req, resp);
}
else
{
//将错误信息放入集合error中
req.setAttribute("error", list);
req.getRequestDispatcher("loginFailure.jsp").forward(req, resp);
}
}
}
新建JSP前端页面userLogin.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<form action="ProcessServlet">
用户名：<input type="text" name="username"><br>
密 码： <input type="password" name="password"><br>
性别： 男<input type="radio" name="gender" value="男">
女<input type="radio" name="gender" value="女"><br>
兴趣：足球<input type="checkbox" name="interest" value="足球">
篮球<input type="checkbox" name="interest" value="篮球">
排球<input type="checkbox" name="interest" value="排球">
羽毛球<input type="checkbox" name="interest" value="羽毛球"> <br>
地址：
<select name="address">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="天津">天津</option>
</select>
<br>
说明：
<textarea name="comment" rows="15" cols="20"></textarea><br>
<input type="submit" value="点击确认"> <input type="reset" value="重 置">
</form>
</body>
</html>
新建转入正确页面loginSucess.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'loginSuccess.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
用户名：<%= request.getAttribute("username") %><br>
密码：<%= request.getAttribute("password") %> <br>
性别：<%= request.getAttribute("gender") %> <br>
//兴趣为数组，需要进行遍历取出
兴趣：<% String[] interest = (String[])request.getAttribute("interest");
for(String str : interest)
{
%>
<%= str %>
<%} %>
<br>
地址：<%= request.getAttribute("address") %><br>
说明：<%= request.getAttribute("comment") %>
</body>
</html>
新建转入出错页面loginFailure.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'loginFailure.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
错误信息如下：<br><br><br>
//错误信息为数组list，需要进行遍历取出
<% List<String> list = (List<String>) request.getAttribute("error"); %>
//使用<ul>***</ul>，会将错误结果加圆点每条列出；使用<ol>***</ol>，会将错误结果加编号每条列出
<ol>
<%
for(String str : list)
{
%>
<li><font color="#ff0000"><%= str %></font></li>
<%} %>
</ol>
</body>
</html>
最后，在web.xml文件中写入：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>ProcessServlet</servlet-name>
<servlet-class>com.servlet.ProcessServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProcessServlet</servlet-name>
<url-pattern>/ProcessServlet</url-pattern>
</servlet-mapping>
</web-app>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
