Web Dev Notes - 6 - 第一个登陆页面-优快云博客

本文链接：https://blog.youkuaiyun.com/lilybear101/article/details/6891167

本文详细介绍了HTML页面设计的登录界面，并解释了如何通过Servlet接收并处理客户端提交的数据。包括HTML表单的使用、servlet配置及处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登陆的html界面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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=gb2312">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	</head>

	<body bgcolor="#FFFFFF">
		<h1 align="center">
			<b>欢迎登陆系统</b>
		</h1>
		<form action="getpostdata" method="post">
			<table width="52%" border="2" align="center">
				<tr bgcolor="#FFFFCC">
					<td align="center" width="43%">
						<div align="center">
							用户名:
						</div>
					</td>
					<td width="57%">
						<div align="left">
							<input type="text" name="username">
						</div>
					</td>
				</tr>
				<tr bgcolor="#CCFF99">
					<td align="center" width="43%">
						<div align="center">
							密码：
						</div>
					</td>
					<td width="57%">
						<div align="left">
							<input type="password" name="password">
						</div>
					</td>
				</tr>
			</table>
			<p align="center">
				<input type="reset" name="Reset" value="重置">
				<input type="submit" name="Submit" value="提交">
			</p>
		</form>
		<br>
	</body>
</html>

html使用form来向服务器提交数据，action元素指定处理客户端请求的servlet名称。

servlet在web.xml中配置

	<servlet>
		<servlet-name>getpostdata</servlet-name>
		<servlet-class>lily.test.GetPostData</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>FirstServlet</servlet-name>
		<url-pattern>/ex/FirstServlet</url-pattern>
	</servlet-mapping>

编写处理的servlet

public class GetPostData extends HttpServlet {

	protected void processRequest(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html; charset=gb2312");
		request.setCharacterEncoding("gb2312");
		PrintWriter out = response.getWriter();
		out.println("<BODY BGCOLOR=\"#FDF5E6\">\n" + 
				"<H1 ALIGN=CENTER>" + "get post data" + "</H1>\n" +
				"<UL>\n" + 
				"<LI><B>username</B>:" +
				request.getParameter("username") + "\n" + 
				"<LI><B>password</B>:" + 
				request.getParameter("password") + "\n" +
				"</UL>\n" +
				"</BODY></HTML>");
		out.close();
	}

	/**
	 * The doGet method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		processRequest(request,response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to
	 * post.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		processRequest(request,response);
	}

	@Override
	public String getServletInfo() {
		return "Short description";
	}
}

运行页面：