Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

Julian_01

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/zhulianwei1999/article/details/109047211

版权

Ajax简介

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

例如百度搜索的提示
在这里插入图片描述

jQury

jQury是一个库，js的大量函数（方法）

$.post

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

        function a1(){
            $.post({
                
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
            success:function (data){
                console.log(data);
            }
            })
        }
    </script>

url：请求到后台的路径
data：后台接受到的前端数据
success(data)：success是回调；参数data是后台传递到前端的数据

步骤

加载数据
xhr异步请求
Response返回json字符串
字符串解析到前端

前端代码

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

<input type="button" value="加载数据" id="btn" onclick="click()">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
        <%-- 后台数据 --%>
    </tbody>
</table>

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

    $(function () {
        $("#btn").click(function () {
            $.post({
                url:"${pageContext.request.contextPath}/a2",
                success:function (data){
                    console.log(data)
                    var html="";
                    for (var 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>

</body>
</html>

后端Controller层传数据

 @RequestMapping("/a2")
 @ResponseBody  // 自动返回字符串
    public List<User> a2(){
        ArrayList<User> users = new ArrayList<>();

        users.add(new User("zlw",12,"male"));
        users.add(new User("xmy",12,"female"));

        return users;
    }

Julian_01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

Ajax简介AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。例如百度搜索的提示jQuryjQury是一个库，js的大量函数（方法）$.post <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
复制链接

扫一扫