Ajax实现登录异步检测用户名或者密码是否正确

2021-10-05 14:32:30 阅读：124 来源： 互联网

标签：异步用户名 name a3 Ajax msg data css String

Controller

@RestController//加上这个不会返回到视图解析器
public class AjaxController { 

@RequestMapping("/a3")
    public String a3(String name,String pwd){
        String msg="";
         if(name!=null)
        {
            if("rk".equals(name)) {
                msg = "ok";
            }
            else{
                msg="用户名有误";
            }
        }
        if(pwd!=null)
        {
            if("123456".equals(pwd)){
                msg="ok";
            }
            else {
                msg = "密码有误";
            }
        }
        return msg; //由于@RestController注解，将msg转成json格式返回
    }
}

前端页面 login.jsp

<%--
  Created by IntelliJ IDEA.
  User: 16246
  Date: 2021/10/5
  Time: 12:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script>

            function test1() {
                $.post({
                    url:"${pageContext.request.contextPath}/a3",
                    data:{"name":$("#username").val()},
                    success:function (data) {
                       console.log(data);//控制台打印信息
                       if(data.toString()==='ok')
                             $("#userinfo").css("color","green");
                       else
                             $("#userinfo").css("color","red");
                       $("#userinfo").html(data);
                    }
                })
            }

            function test2() {
                $.post({
                    url:"${pageContext.request.contextPath}/a3",
                    data:{"pwd":$("#password").val()},
                    success:function (data) {
                        console.log(data);
                        if(data.toString()==='ok')
                            $("#pwdinfo").css("color","green");
                        else
                            $("#pwdinfo").css("color","red");
                        $("#pwdinfo").html(data);
                    }
                })
            }
    </script>
</head>
<body>

<p>
    用户名:<input type="text" id="username" onblur="test1()">
    <span id="userinfo"></span>
</p>
<p>
    密码:<input type="text" id="password" onblur="test2()">
    <span id="pwdinfo"></span>
</p>

</body>
</html>

流程:onblur：移出焦点事件 ----->test1()异步提交信息，请求访问/a3----->/a判断该用户是否存在，返回msg的json格式数据---->回调函数(success)解析后端返回的data，判断data设置css样式，然后在span标签中添加data

标签：异步,用户名,name,a3,Ajax,msg,data,css,String
来源： https://blog.csdn.net/m0_46979453/article/details/120613488

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ajax实现登录异步检测用户名或者密码是否正确