首页 前端知识 利用MySQL,servlet,ajax和jQuery实现一个简单的注册

利用MySQL,servlet,ajax和jQuery实现一个简单的注册

2024-06-09 09:06:17 前端知识 前端哥 244 769 我要收藏

首先是注册页面,效果如下:

用户输入自己想要设置的用户名和密码,然后再次确认密码,即可将所输入的用户名和密码添加到数据库中,若两次输入的密码不一致,会给用户密码不一致的提示。

注册成功:

注册失败:(两次密码输入不一致)

数据库中已经存在刚才所输入的账号密码:

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为执行成功;
    }

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11641.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!