前端登陆使用ajax发送请求到后端，后端进行格式判断，然后返回信息到前端

前端登陆使用ajax发送请求到后端，后端进行格式判断，然后返回信息到前端

上次做了一个项目，没有使用js来判断，而是用户进行登陆，通过ajax发送请求到后端，后端判断格式，然后将格式正确或错误的信息返回前端，
下面是我的过程
#1.首先我先把我的效果贴出来
首先是登陆界面图

然后是账号和密码格式错误

然后是格式正确（在这里我没有用登陆的封面，用的是注册的，因为登陆成功会自动跳转到主界面）

#2.效果看完了，现在是源码展示部分
首先是前端（只贴主要代码）

<h1 id="a">欢迎来到个人博客系统</h1>
<table border="2" width="250px">
    <tr>
        <td width="25%" align="center">账号</td>
        <td width="75%" align="center"><input name="blogName" id="blogName" type="text" onblur="verifyName()" placeholder="请输入账号"  style="height:20px;width:187px"/></td>
    </tr>
    <tr>
        <td width="25%" align="center">密码</td>
        <td width="75%" align="center"><input name="blogPw" id="blogPw" type="password" placeholder="请输入密码"  style="height:20px;width:187px"/></td>
    </tr>
</table>
    <p id="message1" style="display: none"></p>
    <p id="message2" style="display: none"></p>
    <br/>
    <br/>

    <form>
        <input id="userLogin" type="button" value="登陆" onclick="loginSubmit()"/><!--onclick="login_submit()"-->

        <input id="userRegister" type="button" value="注册" onclick="enterRegister()"/>
        <input id="resetPw" type="button" value="重置密码" onclick="enterResetPw()"/>
    </form>
    <h5 style="display: none" id="q">账号格式不正确</h5>
</div>

点击登陆，执行loginSubmit()；
下面是我的ajax代码

function loginSubmit() {
    var blogName = document.getElementById("blogName").value;
    var blogPw = document.getElementById("blogPw").value;
    var dataJson = {"blogName": blogName, "blogPw": blogPw};
    var jsonData = JSON.stringify(dataJson);
    $.ajax({
        type: "get", //请求方式 get
        dataType : "json", //数据类型 json
        data: dataJson, //请求附带参数
        contentType: 'application/json; charset=UTF-8',
        url: "blogLoginURL", // 请求地址
        timeout: 20000, //请求超时时间（20秒）
        //async:false,//同步
        error: function (data) { //请求错误捕捉

            alert("连接服务器失败,请重试!");
        },
        success: function (map) { //请求成功捕捉
            //账号格式不正确
            if(map['userNameFormat']){
                document.getElementById("message1").style.display="block";
                document.getElementById("message1").innerHTML=map['userNameFormat'];
            }
            //密码格式不正确
            if(map['userPwFormat']){
                document.getElementById("message2").style.display="block";
               document.getElementById("message2").innerHTML=map['userPwFormat'];
            }
            //用户存在
            else if(map['successLogin']){
            window.location.href = "blog/blogMain.html";
            }
            //用户不存在
            else if(map['failLogin']){
                document.getElementById("message1").style.display="block";
                document.getElementById("message1").innerHTML=map['failLogin'];
                document.getElementById("message2").style.display="none";
            }
        }
    });
}

发送失败执行error: function (data)
发送成功执行success: function (map)

//用户登陆
    @GetMapping(value = "/blogLoginURL")
    @ResponseBody
    public Map blogLogin(String blogName ,String blogPw){
    //预先判断格式
    Map map = formatVarify.loginFormatVarify(blogName,blogPw);
        if(!(map.containsKey("userNameFormat"))&&!(map.containsKey("userPwForamat"))){
            //将密码进行加密，验证数据库中是否有该用户
            if(bus.queryblogUser(blogName,md5.inputPassToFormPass(blogPw)) == null){
                map.put("failLogin","没有该用户");
            }
            else {
                map.put("successLogin","登陆成功");
            }
            return map;
        }
        else {
            return map;
        }
    }
      

看formatVarify.loginFormatVarify(blogName,blogPw);这条代码

调用farmatVarify类的静态方法loginFormatVarify(String userName,String userPw)

  //格式验证
public class formatVarify {

    //用户信息格式判断
    public  static Map loginFormatVarify(String userName,String userPw) {
        Map hm = new HashMap();
        if (!(userName.matches("[a-zA-Z|0-9|_]{6,13}"))) {
            hm.put("userNameFormat", "用户名只能由英文字母、数字和下划线组成且长度在6~13");
        }
        if (!(userPw.matches("[a-zA-Z]{6,13}"))) {
            hm.put("userPwFormat", "密码只能由英文字母组成且长度在6~13");
        }
        return hm;
    }
}

如果格式不正确就添加到map中去。通过控制器即可放回到ajax中的success中，通过map[‘userNameFormat’]取出map中的值，然后显示在前端上。

我是新手，写的不好大家不要嘲笑。
没有附源码，因为这是我写的项目中的一部分。大家如果有什么不了解的话留言就可以了，我会一一回复的。