05SpringMVC---Ajax的使用

gh-xiaohe

已于 2022-04-16 16:14:29 修改

阅读量519

点赞数

分类专栏： # SpringMVC 文章标签： ajax javascript 前端 springmvc

于 2022-01-07 19:01:34 首次发布

本文链接：https://blog.csdn.net/gh_xiaohe/article/details/122370391

版权

SpringMVC 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

使用Ajax需要导入jQuery

特别注意：

jQuery,需要导入，注意点：路径问题

两种方式：

方式一：官网下载: 存放本地方式 Download jQuery | jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/

<%--    jQuery,需要导入，注意点：路径问题--%>  
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>

方式二：在线导入网址：CDN- jqueryhttps://cdn.baomitu.com/jquery

jQuery 中的 AJAX 请求格式

$.ajax 方法
        url 表示请求的地址
        data 表示发送给服务器的数据
        success 请求成功，响应的回调函数
ajax 默认是get请求

常用案例：表单回显数据

    @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2() {
        List<User> list = new ArrayList<User>();

        User user1 = new User("秦江1", 1, "男");
        User user2 = new User("秦江2", 1, "男");
        User user3 = new User("秦江3", 1, "男");
        User user4 = new User("秦江4", 1, "男");

        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);

        return list;
    }

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>index2</title>
    
    <script crossorigin="anonymous"
            integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
            src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>

<input type="button" id="btn" value="获取数据">

<script>
    $(function () {
        /*点击事件*/
        $("#btn").click(function () {
            $.post("${pageContext.request.contextPath}/ajax/a2",function (data) {//三部合一 实际中[写法]  刷新和加载不许需要数据
                console.log(data);
                /*
                    获取到后端数据
                        此时让数据摆到table---tbody里面
                        把data解析 拼接    js 操作DOM元素  增加节点
                               多个数据遍历
                */
                var html = "";
                for (let i = 0; i <data.length ; i++) {
                    html +="<tr>" +
                        "<td>"+data[i].name+"</td>"+
                        "<td>"+data[i].age+"</td>"+
                        "<td>"+data[i].sex+"</td>"+
                        "</tr>"
                }
                $("#content").html(html);
            })
        })
    })
</script>


<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content"></tbody>

</table>


</body>
</html>

常用案例：用户账号密码的验证

    @RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name,String pwd)  {
        String msg = "";
        if (name!=null) {
            if ("admin".equals(name)) {
                msg = "ok";
            }else {
                msg = "用户名有误";
            }
        }
        if (pwd!=null) {
            if ("123456".equals(pwd)) {
                msg = "ok";
            }else {
                msg = "密码输入有误";
            }
        }
        return msg;
    }

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

    <script crossorigin="anonymous"
            integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
            src="https://lib.baomitu.com/jquery/3.6.0/jquery.js">
    </script>

    <script>

        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a3",
                data:{name:$("#name").val()},
                success:function (data) {
                    if (data.toString()=='ok'){//信息核对成功
                        $('#userInfo').css("color","green");
                    }else {
                        $('#userInfo').css("color","red");
                    }
                    $("#userInfo").html(data)
                }
            });
        }

        function a2() {
            $.post("${pageContext.request.contextPath}/ajax/a3",{'pwd':$("#pwd").val()},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="name" onblur="a1()">  <%--失去焦点--%>
    <span id="userInfo"></span>
</p>
<p>
    密码：
    <input type="text" id="pwd" onblur="a2()">
    <span id="pwdInfo"></span>
</p>

</body>
</html>

个人观点，有不足之处，请大家多批评改正