Ajax实现用户登录提示

心里刺挠

于 2024-03-23 14:05:05 发布

阅读量561

点赞数 11

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/X021101/article/details/136953669

版权

1.Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

2.实例

1.applicationContext.xml: 解决JSON乱码的问题

<!--JSON乱码问题配置-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

2. login.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.js"></script>

    <script>
        function a1() {
            $.post({
                url: "${pageContext.request.contextPath}/login",
                data: {'name': $("#name").val()},
                success: function (data) {
                    if(data.toString() == "ok"){
                        $("#userInfo").css("color","green"); //给id为userInfo组件设置css样式
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }

        function a2() {
            $.post({
                url: "${pageContext.request.contextPath}/login",
                data: {'pwd': $("#pwd").val()},
                success: function (data) {
                    if(data.toString() == "ok"){
                        $("#pswInfo").css("color","green"); //给id为userInfo组件设置css样式
                    }else {
                        $("#pswInfo").css("color","red");
                    }
                    $("#pswInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>

<p>
    用户名：<input type="text" id="name" onblur="a1()"><%--onblur="a1()"失去焦点时触发a1方法--%>
    <span id="userInfo"></span>
</p>
<p>
    密码：<input type="text" id="pwd" onblur="a2()"><%--onblur="a1()"失去焦点时触发a2方法--%>
    <span id="pswInfo"></span>
</p>


</body>
</html>

3.controller类：

   @RequestMapping("/login")
    public String login(String name,String pwd){
        String msg = "";
        if(name != null){
            //实际上admin应该在数据库中的数据
            if("admin".equals(name)){
                msg = "ok";
            }else {
                msg = "用户名有误";
            }
        }
        if(pwd != null){
            //实际上admin应该在数据库中的数据
            if("123456".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密码有误";
            }
        }
        return msg;
    }

4.结果

3.执行流程

当用户名<input>失去焦点时，就会触发a1()方法，a1()方法中是一个post请求，其中会通过 url: "${pageContext.request.contextPath}/login" 进入对应controller类；data: {'name': $("#name").val()}, 会根据id：name获取对应的<input>的值，并赋给name传给controller类；controller类获取到值后，判断该值是否与预期的值相同，并返回一个msg字符串，这个msg字符串会作为响应体返回给post请求，post中的回调函数success会获取响应体的data，并将该data转换为字符串与“ok”对比，根据不同的结果，对标签进行不同的css修饰；最后$("#userInfo").html(data); 将data的值赋值给对应的标签。

a2()方法同上。

心里刺挠

关注

11
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现用户登录提示

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
复制链接

扫一扫