【JavaWeb】日程管理系统添加Ajax注册校验第四期

原创

于 2024-01-30 00:15:00 发布 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #笔记 #java #web

文章目录

注册校验：
- 需求：
客户端代码编写处理 :
- regist.html页面代码
服务端代码处理：
总结

注册校验：

还存在的问题：
当校验不通过时，表单依旧能够提交
之后使用VUE 的 axios 结合 promise 处理

需求：

注册提交前校验用户名是否占用功能

使用后端传递JSON 的方式原因：

解决响应乱码问题

规范响应信息格式

后端响应信息建立统一的格式：

响应一个JSON
{
“code”:“200 505… 就是自定义的业务状态码用于说明这次的业务请求状态”
“message”: “针对业务状态码的补充说明/描述”
“data”:“{}” 本次响应的数据成功/不成功 List<Schedule>…
…
}

业务码响应：成功 200

业务码响应：被占用 505

客户端代码编写处理 :

regist.html页面代码

主要代码：

<script>
  function checkUsername() {
     
     
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/
            var usernameInput = document.getElementById("usernameInput")
            var username = usernameInput.value
            var usernameMsg = document.getElementById("usernameMsg")
            if (!usernameReg.test(username)) {
     
     
                usernameMsg.innerText = "格式有误"
                return false
            }
            // Ajax 验证 用户名 是否已被占用
            let request = new XMLHttpRequest();
            // 设置回调函数 对响应回来的数据进行处理
            request.onreadystatechange = function () {
     
     
                if (request.readyState == 4 && request.status == 200) {
     
     
                    // usernameMsg.innerText = request.responseText;
                    //接收 服务端响应回来的JSON
                    let result = JSON.parse(request.responseText);
                    // 返回的code 业务码不为200 即失败 用户名已存在
                    if (result.code != 200) {
     
     
                        usernameMsg.innerText = "不可用"
                    }
                }
            }

            // 设置请求方式 以及 请求目标资源的路径
            request.open("GET", "/user/checkUsernameUsed?username=" + username)
            request.send();

            usernameMsg.innerText = "OK"
            return true
        }
        </script>

服务端代码处理：

公共工具类：

定义业务码格式的枚举类

package com.doug.wake.common;

/**
 * 业务含义和状态码对应关系的枚举
 *
 */
public enum ResultCodeEnum {
   
   
    /**
     * 成功 200
     */
    SUCCESS(200,"success"),
    USERNAME_ERROR(501,"usernameError"),
    PASSWORD_ERROR(503,"passwordError"),
    NOTLOGIN(504,"notLogin"),
    USERNAME_USED(505,"userNameUsed")
    ;

    private Integer code;
    private String message;
    private ResultCodeEnum(Integer code, String message) {
   
   
        this.code = code;
        this.message = message;
    }
    public Integer getCode() {
   
   
        return code;
    }
    public String getMessage() {
   
   
        return message;
    }
}

添加公共的JSON数据响应格式工具类

package com.doug.wake.common;

/**
 * 全局统一响应的JSON格式处理类
 */
public class Result<T> {
   
   
    // 返回码
    private Integer code;
    // 返回消息
    private String message;
    // 返回数据
    private T data;

    public Result() {
   
   
    }

    // 返回数据
    protected static <T> Result<T> build(T data) {
   
   
        Result<T> result = new Result<T>();
        if (data != null) {
   
   
            result.setData(data);
        }
        return result;
    }

    public static