SpringMVC(22) —— Ajax验证用户名体验

最新推荐文章于 2020-09-23 14:58:28 发布

原来是小别扇

最新推荐文章于 2020-09-23 14:58:28 发布

阅读量192

点赞数

分类专栏： springmvc 文章标签： ajax html js jquery springmvc

本文链接：https://blog.csdn.net/Jzandth/article/details/108743305

版权

springmvc 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

1.需求

在这里插入图片描述

2.代码实现

controller

    @RequestMapping("/t3")
    public String test03(String name,String pwd){
        System.out.println("test03==>");
        String msg = "";
        if (name!=null){
            if ("admin".equals(name)){
                msg = "ok";
            }else {
                msg = "用户名有误";
            }
        }

        if (pwd!=null){
            if ("123".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密码有误";
            }
        }

        return msg;
    }

在这里插入图片描述
注意：我们使用的是注解@RestController，所以返回的结果不会走视图解析器而是直接返回给前端页面

视图

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/t3",
                data:{"name":$("#name").val()},
                success:function (data){
                    console.log(data);
                    $("#span1").css("color","red")
                    if (data === 'ok'){
                        $("#span1").css("color","green")
                    }
                    $("#span1").html(data)
                }
            })
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/t3",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    console.log(data);
                    $("#span2").css("color","red")
                    if (data === 'ok'){
                        $("#span2").css("color","green")
                    }
                    $("#span2").html(data)
                }
            })
        }
    </script>
</head>
<body>
用户名：<input type="text" id="name" onblur="a1()">
    <span id="span1"></span><br>
密&nbsp;码：<input type="text" id="pwd" onblur="a2()">
    <span id="span2"></span>
</body>
</html>

在这里插入图片描述

3.测试

在这里插入图片描述

4.注意

在使用的时候可能返回的数据出现乱码情况，这个时候我们应该使用的是JSON数据格式的乱码处理，因为我们后端直接返回的是一个字符串，jQuery.ajax()就会按照JSON的数据格式来接收

原来是小别扇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC(22) —— Ajax验证用户名体验

目录1.需求2.代码实现3.测试1.需求2.代码实现controller @RequestMapping("/t3") public String test03(String name,String pwd){ System.out.println("test03==>"); String msg = ""; if (name!=null){ if ("admin".equals(name)){
复制链接

扫一扫