首先是注册页面,效果如下:
用户输入自己想要设置的用户名和密码,然后再次确认密码,即可将所输入的用户名和密码添加到数据库中,若两次输入的密码不一致,会给用户密码不一致的提示。
注册成功:
注册失败:(两次密码输入不一致)
数据库中已经存在刚才所输入的账号密码:
html,jQuery代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎注册</title>
<link rel="stylesheet" href="./register.css">
<script src="./index.js"></script>
<script>
$(function(){
$(".btn").on("click",function(){
$.ajax({
url:"add",
type:"post",
data:{
acc:$("#acc").val(),
pwd:$("#pwd").val(),
true_pwd:$("#true_pwd").val()
},
success:function(data){
alert(data.msg)
}
})
})
})
</script>
</head>
<body>
<div class="container">
<div class="main">
<img src="./login_left.jpg" alt="" class="first">
<div class="login_right">
<div class="login_content">
<div class="welcome">
欢迎注册!
</div>
<div class="login_main_content">
<input type="text" class="input" placeholder="用户名" id="acc"><br>
<input type="text" class="input" placeholder="密码" id="pwd"><br>
<input type="text" class="input" placeholder="确认密码" id="true_pwd"><br>
<input type="button" value="注册" class="btn">
<div class="sign">
<a href="./login.html">去登录</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
servlet代码如下:
package zyf;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import db.MysqlUtil;
/**
* Servlet implementation class add
*/
@WebServlet("/add")
public class add extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public add() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("json/text");
//获取数据
String account = request.getParameter("acc");
String password = request.getParameter("pwd");
String true_password = request.getParameter("true_pwd");
//往数据库中添加
if(password.equals(true_password)) {
String sql = "insert user(account,password) values(\""+account+"\",\""+password+"\")";
int res = MysqlUtil.add(sql);
String json = "";
//定义反馈数据
if(res==1) {
json = "{\"code\":\"1\",\"msg\":\"注册成功\"}";
}else {
json = "{\"code\":\"0\",\"msg\":\"注册失败\"}";
}
response.getWriter().write(json);
}
else {
System.out.println("您输入的两次密码不一致");
String json = "";
json = "{\"code\":\"0\",\"msg\":\"您两次输入的密码不一致,注册失败\"}";
response.getWriter().write(json);
}
//给前端响应数据
}
}
数据库添加代码:
public static int add(String sql) {
// System.out.println("sql语句是:" + sql);
int i=0;
//数据库连接
DBConnection db = new DBConnection();
try {
PreparedStatement preStmt = (PreparedStatement) db.conn.prepareStatement(sql);
preStmt.executeUpdate();
preStmt.close();
db.close();//关闭连接
i = 1;
System.out.println("数据插入成功,sql语句是:" + sql);
} catch (Exception e) {
e.printStackTrace();
}
return i;//返回影响的行数,1为执行成功;
}