使用ajax+html完成注册功能

最新推荐文章于 2024-06-21 20:15:59 发布

努力成为大佬的小垃圾

最新推荐文章于 2024-06-21 20:15:59 发布

阅读量986

点赞数

本文链接：https://blog.csdn.net/ssbviv/article/details/122168322

版权

一、引言

本文使用ajax+html来完成注册功能，本文已将源代码放到了码云上，有需要的可以自行查看。登录功能在这儿—>https://editor.csdn.net/md/?articleId=122168322
如果下边代码出现粘贴问题或者其他问题可以来码云看全部的代码。
网址：https://gitee.com/rabbit-a/learning-summary.git
先放代码后说明

二、正文

注册页面

在这里插入图片描述

注册功能（后台）

package cn.itcast.film.web.servlet;

import cn.itcast.film.domain.ResultInfo;
import cn.itcast.film.domain.User;
import cn.itcast.film.service.UserService;
import cn.itcast.film.service.impl.UserServiceImpl;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/RegistUserServlet")
public class RegistUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //验证码校验
        String check = request.getParameter("checkcode");
        //从session中获取验证码
        HttpSession session = request.getSession();
        String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
        session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次
        //比较
        if(checkcode_server==null||!checkcode_server.equalsIgnoreCase(check)){
            //验证码错误
            ResultInfo info =new ResultInfo();
            //
            info.setFlag(false);
            info.setErrorMsg("验证码错误！");
            //将info对象序列化为json
            ObjectMapper mapper=new ObjectMapper();
            String json = mapper.writeValueAsString(info);
            //将json数据写回客户端
            //设置content-type
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(json);
            return;
        }
        //1.获取数据
        Map<String, String[]> map = request.getParameterMap();

        //2.封装对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3.调用service完成注册
        UserService service = new UserServiceImpl();
        boolean flag = service.regist(user);
        ResultInfo info = new ResultInfo();
        //4.响应结果
        if(flag){
            //注册成功
            info.setFlag(true);
        }else{
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败!");
        }

        //将info对象序列化为json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(info);

        //将json数据写回客户端
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);
    }
}

注册功能（前台）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/regist.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript"></script>
    <title>注册页面</title>
    <script type="text/javascript" src="js/regist.js"></script>

</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <div id="errorMsg" style="color: red;text-align: center"></div>
            <!--定义表单 form-->
            <form action="RegistUserServlet" id="registerForm" accept-charset="utf-8" method="post">
                <!--提交处理请求的标识符-->
                <input type="hidden" name="action" value="register">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img src="CheckCodeServlet" height="32px" onclick="changeCheckCode(this)">
                            <script type="text/javascript">
                                //图片点击事件
                                function changeCheckCode(img) {
                                    img.src="CheckCodeServlet?"+new Date().getTime();
                                }
                            </script>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <div class="rg_right">
        <p>已有账号?<a href="login.html">立即登录</a></p>
    </div>

</div>

</body>
</html>

注册功能（js代码）

//校验用户名
//1.用户名：单词字符，3~20位
function checkUsername(){
    //1.获取用户名
    let username=$("#username").val();
    //2.定义正则
    let reg_username=/^\w{3,20}$/;
    //3.判断，给出信息
    let flag= reg_username.test(username);
    if(flag){
        //用户名合法
        $("#username").css("border","");
    }else{
        //用户名非法,加一个红色边框
        $("#username").css("border","1px solid red");
    }
    return flag;
}

//校验密码
function checkPassword(){
    //1.获取密码
    let password=$("#password").val();
    //2.定义正则
    let reg_password=/^\w{3,20}$/;
    //3.判断，给出信息
    let flag= reg_password.test(password);
    if(flag){
        //用户名合法
        $("#password").css("border","");
    }else{
        //用户名非法,加一个红色边框
        $("#password").css("border","1px solid red");
    }
    return flag;
}

$(function(){
    //表单提交时，调用所有的校验方法
    $("#registerForm").submit(function (){
        //1.发送数据到服务器
        if(checkUsername() && checkPassword()){
            //校验通过，发送Ajax请求，提交表单的数据
            $.post("RegistUserServlet",$(this).serialize(),function (data){
                //处理服务器响应的数据 data	{flag:true,errorMsg:"注册失败"}
                if(data.flag){
                    //注册成功，跳转成功页面
                    location.href="login.html";
                }else{
                    //注册失败,给errorMsg添加提示信息
                    $("#errorMsg").html(data.errorMsg);
                }
            });
        }
        //2.跳转页面

        //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回FALSE，则表单不提交
    });
    //当某一个组件失去焦点时,调用对应的校验方法
    $("#username").blur(checkUsername);
    $("#password").blur(checkPassword);
})

三、说明

我们把js代码都提到了一个js文件里，只需引进到页面就行，在注册页面里，我们先把用户名和密码都给做了一个校验的功能，不合法的话边框就变成了红色，合法就不显示。
提交表单时就先进行校验，校验通过就发送ajax请求，先进入RegistUserServlet,
我们先校验验证码，如果验证码不对就不用校验用户名和密码，之后获取数据，再进行封装，再调用service的regist()方法进行查询，我们根据用户名是否存在进行查询，存在就报出注册失败的信息，否则就保存到数据库。
然后响应结果，再将我们保存的信息info序列化为json格式，再写回客户端。
在function(data)方法里注册成功就跳转页面，不成功就给出提示信息。

注：需要的代码都可以在上边的码云里找到。

努力成为大佬的小垃圾

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
使用ajax+html完成注册功能

目录一、引言二、正文注册页面注册功能（后台）注册功能（前台）注册功能（js代码）三、说明一、引言本文使用ajax+html来完成注册功能，本文已将源代码放到了码云上，有需要的可以自行查看。登录功能在这儿—>https://editor.csdn.net/md/?articleId=122168322如果下边代码出现粘贴问题或者其他问题可以来码云看全部的代码。网址：https://gitee.com/rabbit-a/learning-summary.git先放代码后说明二、正文注册页面
复制链接

扫一扫