【SpringBoot学习】04、注册（二）：利用Ajax异步提示用户名已存在等错误信息

最新推荐文章于 2022-08-07 19:38:25 发布

MSC419

最新推荐文章于 2022-08-07 19:38:25 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_38939822/article/details/121466916

版权

Spring全家桶同时被 2 个专栏收录

18 篇文章 3 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

是个小小示例就不写数据访问层和业务层了

1 视图层

//异步注册
    @RequestMapping(path = "/registAjax",method = RequestMethod.POST)
    @ResponseBody
    public String testRegist(String username){
        System.out.println(username);//代表处理数据的逻辑
        if(username.equals("小明")){
            return CommunityUtil.getJSONString(0,"该名字已被占用");
        }else{
            return CommunityUtil.getJSONString(1, "该名称尚未被使用");
        }

    }

工具类作用：将信息转成JSON字符串

//将数据包装成JSON对象
    public static String getJSONString(int code, String msg, Map<String,Object> map){
        JSONObject json = new JSONObject();
        json.put("code", code);
        json.put("msg", msg);
        if(map!=null){
            for(String key:map.keySet()){
                json.put("key", map.get(key));
            }
        }
        return json.toJSONString();
    }

    public static String getJSONString(int code, String msg){
        return getJSONString(code, msg, null);
    }

    public static String getJSONString(int code){
        return getJSONString(code, null, null);
    }

2 html网页

路径：static/html/demo-regist.html
直接用http://localhost:8080/community/html/demo-regist.html就可以访问，community是项目名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form action="/community/demo/registAjax" method="post">

        用户名:<input name="username" id="username" type="text" /><span  id="msg" style="color: green;"></span><br>

        密码:<input name="password" type="password"> <br>
        <input type="submit" value="注册">

    </form>
	<!--导入jquery文件 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script>
    	// 页面加载完成后再执行
        $(function (){

			// id为username的元素绑定blur方法，blur方法 失去焦点时执行
            $("#username").on("blur",function(){
            	//post方法格式：三个参数
            	//1.将数据返回到哪里的地址2.要传入后台的数据3.处理后台返回的数据（data）
                $.post(
                    "/community/demo/registAjax",
                    {"username":$("#username").val()},
                    function(data){
                    //数据转成JSON字符串，不然取不到
                        data = $.parseJSON(data);
                        if(data.code){
                            //设置msg的文本值
                            $("#msg").text(data.msg)
                            //设置css属性
                            $("#msg").css("color","green")
                        }else {
                            $("#msg").text(data.msg)

                            $("#msg").css("color", "red")
                        }
                    }
                )
            })
        })
    </script>
</body>
</html>