web初学之servelet开发综述（二）
实现登录页面的校验用户名与密码操作：
在登录页面输入用户名与密码，通过serverlet来检验用户名与密码，如果正确则向页面输出holleworld信息，如果不正确，就重定向回到登录页面
首先编写登录页面 login.html
<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="/ResponseDemo/login" method="post">
username: <input type="text" name="username"/><br/>
password: <input type="password" name="password"/><br/>
<input type="submit" value="login"/>
</form>
</body>
</html>
创建用于验正用户名与密码的serverlet
public class LonginSerlet extends HttpServlet {
/**
* 获取登录页面输入的username 和password
* 检验，如果username password匹配，则向页面输出holle world
* 否则就向重定向到login登录页面
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
if ("admin".equals(username)&&"123".equals(password)) {
//向页面输出内容
response.getWriter().append("holle world ");
} else {
//密码错误 ，重定向回到登录页面
//设置302的状态码
response.setStatus(302);
//设置头location
response.setHeader("Location", "/ResponseDemo/response/login.html");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
将项目发布到tomcate上并启动服务
访问页面调试
js实现定时跳转页面的功能
实现的代码 逻辑：
<!DOCTYPE html>
<html>
<head>
<title>refresh.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<meta http-equiv="Refresh"
content="5;url=/ResponseDemo/response/login.html">
</head>
<body>
页面将在
<span id="jumpsapn"> </span>进行跳转到登录页面
</body>
<script type="text/javascript">
//初始化输出的数字
var timeNumber = 5;
//向页面输出内容的控制函数
function jumpToLogin() {
//获取到向页面输出内容的span对象标签
var jumpSpan = document.getElementById("jumpsapn");
//向span中写入内容
jumpSpan.innerHTML = timeNumber;
timeNumber--;
}
//设置每隔1秒时间 调用一次函数方法
setInterval("jumpToLogin() ;", 1000);
</script>
</html>
然后在页面中进行访问操作
解决字节流向页面输出中文乱码问题
public class WriteToHtmlDes extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//使用字节流向页面输出文字
/**
* 使用字节流向页面输出 文字 不一定会有乱码
* 解决乱码的方法
* 设置浏览器中的编码，
* 设置字节数组的编码
* 前后让两个编码一样，就不会出现乱码问题
*/
//设置浏览器的编码格式
response.setHeader("Content-Type", "text/html;charset=utf-8");
//设置字节数组的编码
response.getOutputStream().write("字节流中文输出,".getBytes("utf-8"));
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
public void init() throws ServletException {
// Put your code here
}
}
解决使用字符流向页面输出中文乱码问题
package com.androidlongs;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class WriteToHtmlDesChart extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//使用字符流向页面输出中文一定会出现乱码现象
/**
* 使用字符流输出内容的时候 ，首先会把输入的内容放到response缓冲区里面，通过缓冲区向页面输出
* 在response缓冲区中有默认的编码 iso8859-1;不支持中文，
*
* 解决方法
* 设置response缓冲区的编码
* 设置浏览器的编码
* 使用两个编码方式一样就可以了
*/
//设置response缓冲区的编码
response.setCharacterEncoding("utf-8");
//设置浏览器的编码
response.setHeader("Content-Type", "text/html;charset=utf-8");
//使用字符流输出中文
response.getWriter().write("使用字符流输出中文");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
注：
1.
//使用字符流的时候 设置编码方式的简写方法 response.setContentType("text/html;charset=utf-8");
2. 字符流与字节流向页面输出内容的时候 不可以同时使用
3. 不可以使用字节流向页面直接输出数字
使用response实现文件的下载操作
操作步骤 ：
从服务器上得到要下载的文件
把得到的文件写到浏览器中
设置关信息Content-Disposition
public class DownLoadFile extends HttpServlet {
/**
* 从服务器上得到要下载的文件
* 把得到的文件 写到浏览器中
* 设置 头信息Content-Disposition
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//得到要下载的文件的路径
String realPath = getServletContext().getRealPath("/img/");
//得到文件的名称
int lastIndexOf = realPath.lastIndexOf("\\");
String fileName = realPath.substring(lastIndexOf+1);
//设置头信息
//这里设置的头信息说明 无论是什么格式的文件，都是以下载的方式来打开的
//如果不设置这个头信息，则会显示在浏览器中
response.setHeader("Content-Disposition", "attachment;filename= "+fileName);
//拿到下载文件 的输入流
FileInputStream fileInputStream = new FileInputStream(realPath);
//使用输出流把文件写到浏览器
ServletOutputStream outputStream = response.getOutputStream();
//流转换操作
int len =0;
byte[] b = new byte[1024];
while((len=fileInputStream.read(b))!=-1){
outputStream.write(b,0,len);
}
//关闭流
fileInputStream.close();
outputStream.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void init() throws ServletException {
// Put your code here
}
}
注： 如果下载的文件的名称中包含中文，那么在进行下载显示文件名称的时候会出现乱码或者不提示显示名称的问题
<pre name="code" class="javascript"> // 注 如果要下载的文件名称中包含中文，那么在下载的时候显示的提示信息中不会再显示下载文件的名称 // ie采用的是url编码 ， 火狐 采用的base64编码 // 区分不同的浏览器 设置 不同的编码 方式 // User-Agent头信息可以得到浏览器的类型 String header = request.getHeader("User-Agent"); // 对文件名进行编码处理 fileName = URLEncoder.encode(fileName, "utf-8");
生成随机验证码并加载到html中显示
生成随机验证码
public class IdentifuingCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 第一步 生成背景图片
// 第二步生成随机数字和字母
// 第三步将数字和字母画到图片上
// 第四步生成四条线，并画到图片上
// 第五步显示到页面上
//设置图片显示的宽与高
int width = 350;
int height = 100;
//这里是生成了五个随机数字，在y轴方向，应当保证数字居中
int x = width/5;
int y = height/2;
// 生成图片
BufferedImage bufferedImage = new BufferedImage(width, height,
BufferedImage.TYPE_3BYTE_BGR);
// 得到画笔
Graphics2D graphics2d = (Graphics2D) bufferedImage.getGraphics();
// 设置颜色
graphics2d.setColor(Color.yellow);
// 设置字体的样式
graphics2d.setFont(new Font("宋体", Font.BOLD, 20));
// 设置随机数的数据来源
String codeDes = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
// 生成随机的字母和数字
Random random = new Random();
// 生成五个随机的字母和数字
for (int i = 0; i < 5; i++) {
// 设置生成的数字的范围
int nextInt = random.nextInt(codeDes.length());
// 根据下标取出字符
char charAt = codeDes.charAt(nextInt);
// 将随机数画到图片上
graphics2d.drawString(charAt + "", x, y);
//改变每次画到图片上数字的x轴方向的起始位置
//如果不改变，那么所有的画出的随机数字都会重叠到一起
x=x+width/5;
}
List<Color> colorList = new ArrayList<Color>();
colorList.add(Color.blue);
colorList.add(Color.green);
colorList.add(Color.red);
colorList.add(Color.gray);
colorList.add(Color.black);
// 第四步 画四条线到图片上
// 定义画线的起点与终点的坐标
int x1, y1, x2, y2;
for (int i = 0; i < 4; i++) {
// 生成随机的坐标
x1 = random.nextInt(width);
y1 = random.nextInt(height);
x2 = random.nextInt(width);
y2 = random.nextInt(height);
int colorIndex = random.nextInt(colorList.size());
// 设置画笔的颜色
graphics2d.setColor(colorList.get(colorIndex));
// 向图片上画出直线
graphics2d.drawLine(x1, y1, x2, y2);
}
// 第五步 把图片显示到页面上
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
public void init() throws ServletException {
// Put your code here
}
}
效果图
当然在这里生成的只是英文与数字的随机验证码，也可以生成带有汉字的随机验证码，我们只需要更换一下随机数字的来源数据即可
生成汉字验证码
生成汉字对应的数据
// 生成 汉字的随机码数据源 String codeDes = "\u7684\u4e00\u4e86\u662f\u6211\u4e0d\u5728\u4eba\u4eec\u6709\u6765\u4ed6\u8fd9\u4e0a\u7740\u4e2a\u5730\u5230\u5927\u91cc\u8bf4\u5c31\u53bb\u5b50\u5f97\u4e5f\u548c\u90a3\u8981\u4e0b\u770b\u5929\u65f6\u8fc7\u51fa\u5c0f\u4e48\u8d77\u4f60\u90fd\u628a\u597d\u8fd8\u591a\u6ca1\u4e3a\u53c8\u53ef\u5bb6\u5b66\u53ea\u4ee5\u4e3b\u4f1a\u6837\u5e74\u60f3\u751f\u540c\u8001\u4e2d\u5341\u4ece\u81ea\u9762\u524d\u5934\u9053\u5b83\u540e\u7136\u8d70\u5f88\u50cf\u89c1\u4e24\u7528\u5979\u56fd\u52a8\u8fdb\u6210\u56de\u4ec0\u8fb9\u4f5c\u5bf9\u5f00\u800c\u5df1\u4e9b\u73b0\u5c71\u6c11\u5019\u7ecf\u53d1\u5de5\u5411\u4e8b\u547d\u7ed9\u957f\u6c34\u51e0\u4e49\u4e09\u58f0\u4e8e\u9ad8\u624b\u77e5\u7406\u773c\u5fd7\u70b9\u5fc3\u6218\u4e8c\u95ee\u4f46\u8eab\u65b9\u5b9e\u5403\u505a\u53eb\u5f53\u4f4f\u542c\u9769\u6253\u5462\u771f\u5168\u624d\u56db\u5df2\u6240\u654c\u4e4b\u6700\u5149\u4ea7\u60c5\u8def\u5206\u603b\u6761\u767d\u8bdd\u4e1c\u5e2d\u6b21\u4eb2\u5982\u88ab\u82b1\u53e3\u653e\u513f\u5e38\u6c14\u4e94\u7b2c\u4f7f\u5199\u519b\u5427\u6587\u8fd0\u518d\u679c\u600e\u5b9a\u8bb8\u5feb\u660e\u884c\u56e0\u522b\u98de\u5916\u6811\u7269\u6d3b\u90e8\u95e8\u65e0\u5f80\u8239\u671b\u65b0\u5e26\u961f\u5148\u529b\u5b8c\u5374\u7ad9\u4ee3\u5458\u673a\u66f4\u4e5d\u60a8\u6bcf\u98ce\u7ea7\u8ddf\u7b11\u554a\u5b69\u4e07\u5c11\u76f4\u610f\u591c\u6bd4\u9636\u8fde\u8f66\u91cd\u4fbf\u6597\u9a6c\u54ea\u5316\u592a\u6307\u53d8\u793e\u4f3c\u58eb\u8005\u5e72\u77f3\u6ee1\u65e5\u51b3\u767e\u539f\u62ff\u7fa4\u7a76\u5404\u516d\u672c\u601d\u89e3\u7acb\u6cb3\u6751\u516b\u96be\u65e9\u8bba\u5417\u6839\u5171\u8ba9\u76f8\u7814\u4eca\u5176\u4e66\u5750\u63a5\u5e94\u5173\u4fe1\u89c9\u6b65\u53cd\u5904\u8bb0\u5c06\u5343\u627e\u4e89\u9886\u6216\u5e08\u7ed3\u5757\u8dd1\u8c01\u8349\u8d8a\u5b57\u52a0\u811a\u7d27\u7231\u7b49\u4e60\u9635\u6015\u6708\u9752\u534a\u706b\u6cd5\u9898\u5efa\u8d76\u4f4d\u5531\u6d77\u4e03\u5973\u4efb\u4ef6\u611f\u51c6\u5f20\u56e2\u5c4b\u79bb\u8272\u8138\u7247\u79d1\u5012\u775b\u5229\u4e16\u521a\u4e14\u7531\u9001\u5207\u661f\u5bfc\u665a\u8868\u591f\u6574\u8ba4\u54cd\u96ea\u6d41\u672a\u573a\u8be5\u5e76\u5e95\u6df1\u523b\u5e73\u4f1f\u5fd9\u63d0\u786e\u8fd1\u4eae\u8f7b\u8bb2\u519c\u53e4\u9ed1\u544a\u754c\u62c9\u540d\u5440\u571f\u6e05\u9633\u7167\u529e\u53f2\u6539\u5386\u8f6c\u753b\u9020\u5634\u6b64\u6cbb\u5317\u5fc5\u670d\u96e8\u7a7f\u5185\u8bc6\u9a8c\u4f20\u4e1a\u83dc\u722c\u7761\u5174\u5f62\u91cf\u54b1\u89c2\u82e6\u4f53\u4f17\u901a\u51b2\u5408\u7834\u53cb\u5ea6\u672f\u996d\u516c\u65c1\u623f\u6781\u5357\u67aa\u8bfb\u6c99\u5c81\u7ebf\u91ce\u575a\u7a7a\u6536\u7b97\u81f3\u653f\u57ce\u52b3\u843d\u94b1\u7279\u56f4\u5f1f\u80dc\u6559\u70ed\u5c55\u5305\u6b4c\u7c7b\u6e10\u5f3a\u6570\u4e61\u547c\u6027\u97f3\u7b54\u54e5\u9645\u65e7\u795e\u5ea7\u7ae0\u5e2e\u5566\u53d7\u7cfb\u4ee4\u8df3\u975e\u4f55\u725b\u53d6\u5165\u5cb8\u6562\u6389\u5ffd\u79cd\u88c5\u9876\u6025\u6797\u505c\u606f\u53e5\u533a\u8863\u822c\u62a5\u53f6\u538b\u6162\u53d4\u80cc\u7ec6";
效果图
在html中加载生成的验证码
<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="/ResponseDemo/login" method="post">
username: <input type="text" name="username" /><br />
password: <input type="password" name="password" /><br />
code : <input type="text"name="code" /> <br />
<!-- 在这里通过这种方式来引用我们servelet中生成的随机数字 -->
<img id="imageId" src="/ResponseDemo/servlet/IdentifuingCodeServlet" /><br/>
<!-- 设置触发刷新转换验证码的事件 -->
<a href="#" onclick="loadCode();">点击换一张</a>
<br/>
<input type="submit" value="login" />
</form>
</body>
<script type="text/javascript">
function loadCode() {
//获取加载验证码的图片的标签
var img =document.getElementById("imageId");
//使用img这个标签再执行一次这个方法
//这里在访问的路径下加一个随机的数字来解决点击刷新的时候加载图片出现的缓存问题
img.src = "/ResponseDemo/servlet/IdentifuingCodeServlet?"+new Date().getTime();
}
</script>
</html>
效果图
servlet中获取表单提交的数据
方式一
html中
<body> <form action="/ResponseDemo/servlet/GetValueServlet" method="post"> username : <input type="text" name="username"/> <br/> password : <input type="password" name="password"/> <br/> <input type="submit" value="submit"/> </form> </body>
接收数据的servelet
public class GetValueServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取表单中提交的数据 String username = request.getParameter("username"); String password = request.getParameter("password"); System.out.println("username is "+username); System.out.println("password is "+password); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }对应的配制信息
<servlet> <servlet-name>GetValueServlet</servlet-name> <servlet-class>com.androidlongs.GetValueServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>GetValueServlet</servlet-name> <url-pattern>/servlet/GetValueServlet</url-pattern> </servlet-mapping>
点击提交后 控制台对应输出
获取表单提交数据方式二 - 获取多选框输入的内容
html中
<body> <form action="/ResponseDemo/servlet/GetValueServlet" method="post"> username: <input type="text" name="username"/> <br/> addr: <input type="text" name="addr"/> <br/> love: <input type="checkbox" name="love" value="lan"/>篮球 <input type="checkbox" name="love" value="pingpang"/>乒乓球 <input type="checkbox" name="love" value="yu"/>羽毛球 <br/> <input type="submit" value="提交"/> </form> </body>
对应的servlet
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取表单中提交的数据 String[] values = request.getParameterValues("love"); System.out.println(Arrays.toString(values)); }
点击提交在控制台输出信息
获取表单提交数据方式三 -获取表单输入项name的值和输入的值
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 表单输入项name的值和输入的值 Map<String, String[]> map = request.getParameterMap(); // 遍历map /* * 第一种，得到所有的key，根据key得到value 第二种，得到key-value关系 */ Set<String> keys = map.keySet(); /* * set遍历两种方式 迭代器 增强for list的遍历四种方式 普通for 迭代器 增强for （list的迭代器） */ // 遍历set for (String key : keys) { // 根据key得到value String[] values = map.get(key); System.out.println("name: " + key + " :: value:" + Arrays.toString(values)); } }
解决表单提交数据包含中文乱码问题
post提交方式处理中文方法
post提交数据 会把数据放到request缓冲区里面，request默认编码是 iso8859-1，这个编码不支持中文
解决方法：
设置request缓冲区的编码
request.setCharacterEncoding("utf-8");
get提交方式处理中文方法
第一种，修改tomcat的配置文件
* 找到tomcat的server.xml，找到修改端口的地方，添加一个属性 URIEncoding="utf-8"
第二种，先对数据进行编码，进行解码
username = URLEncoder.encode(username, "ISO8859-1");
username = URLDecoder.decode(username, "utf-8");
第三种，使用string的构造完成编码(****)
* username = new String(username.getBytes("ISO8859-1"),"utf-8");