Ajax中异步加载数据的理解(狂神说课程笔记自学）

最新推荐文章于 2022-04-06 14:08:15 发布

clgm___

最新推荐文章于 2022-04-06 14:08:15 发布

阅读量106

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/clgm___/article/details/120434148

版权

Ajax中异步加载数据的理解

在项目SpringMVC-Study的 05-module 中login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>

        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/t3",
                data:{'name':$("#userName").val()},
                success:function (data) {
                    if (data.toString()=='ok'){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/t3",
                data:{'pwd':$("#userPwd").val()},
                success:function (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" οnblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="text" id="userPwd" οnblur="a2()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

用户界面显示显而易见，写上id（关键），

写上一个事件函数、

触发之后前端发出一个post请求走了函数里面url的路径

携带了data：｛“传递给后端方法的入口参数名”，前端数据｝

成功（success）：函数（参数data，status等）｛

下一步的动作

｝