结果展示
代码
register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
</head>
<body>
<div class="jumbotron" align="center">
<form id="registerForm">
<table cellspacing="0" cellpadding="0">
<tr align="center">
<th colspan="3" style="text-align: center;">
<h2>用户注册</h2>
</th>
</tr>
<tr>
<td class="text-muted">身份：</td>
<td colspan="2">
<select class="form-control" name="identity">
<option value="请选择身份">请选择身份</option>
<option value="学生">学生</option>
<option value="教师">教师</option>
<option value="管理员">管理员</option>
</select>
</td>
</tr>
<tr>
<td class="text-muted">用户名：</td>
<td colspan="2"><input class="form-control" placeholder="请输入账号" type="text" name="username"></td>
</tr>
<tr>
<td class="text-muted">密码：</td>
<td colspan="2"><input class="form-control" placeholder="请输入密码" type="password" name="password"></td>
</tr>
<tr>
<td class="text-muted">验证码：</td>
<td><input class="form-control" type="text" name="verificationCode"></td>
<td><img src="#" onclick="changeImg"></td>
</tr>
<tr align="center">
<td><input class="btn btn-primary" type="submit" value="登录" onclick="register()"></td>
<td><input class="btn btn-warning" type="reset" value="重置"></td>
</tr>
<tr align="center">
<td colspan="3" class="text-muted">已有账号？立即<a href="login.html">登录</a></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function register() {
$.ajax({
type:"POST",// 传数据的方式
url:"registerServlet",// servlet的地址
data:$('#registerForm').serialize(), //传的数据form表单里面的数据
success:function (result) {//传数据成功之后的操作 result是servlet传过来的数据 这个函数对result进行处理
alert(result);// 通过alert方法显示
}
})
}
</script>
</body>
</html>
RegisterServlet.java
package servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 注册servlet
* @author lck100
*/
public class RegisterServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置请求的编码格式
request.setCharacterEncoding("UTF-8");
// 设置响应的编码格式
response.setContentType("text/html;charset=UTF-8");
// 获取前端数据值
String identity=request.getParameter("identity");
String username=request.getParameter("username");
String password=request.getParameter("password");
// 传数据到前端
response.getWriter().println(identity);
// 输出数据到控制台显示
System.out.println("身份："+identity+"\t\t用户名："+username+"\t\t密码："+password);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>RegisterServlet</servlet-name>
<servlet-class>servlet.RegisterServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegisterServlet</servlet-name>
<url-pattern>/registerServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>register.html</welcome-file>
</welcome-file-list>
</web-app>如果对完整源码感兴趣。
可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。
注意：在公众号后台回复【CSDN201910041926】可获取本节源码。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
