Ajax详解(二)

最新推荐文章于 2024-09-05 15:06:14 发布

冷丁_

最新推荐文章于 2024-09-05 15:06:14 发布

阅读量240

点赞数

分类专栏： SpringMVC精华详解 Java后端学习精华文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_41359998/article/details/122809688

版权

Java后端学习精华同时被 2 个专栏收录

95 篇文章 5 订阅

订阅专栏

SpringMVC精华详解

27 篇文章 0 订阅

订阅专栏

本节我们继续完成一个demo，利用Ajax获得后端的数据并展示到前端

AjaxController.java

    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> userList=new ArrayList<User>();
        //添加数据
        userList.add(new User("java",1,"a"));
        userList.add(new User("c++",2,"b"));
        userList.add(new User("go",3,"c"));
        return userList;
    }

test2.jsp

<%--
  Created by IntelliJ IDEA.
  User: apple
  Date: 2022/2/7
  Time: 2:55 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
            //$.post(url,param[可省略],success)
                $.post("${pageContext.request.contextPath}/a2",function (data){
                    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>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

    </tbody>
</table>
</body>
</html>

在这里插入图片描述
加载数据成功！

Ajax的前端写法比较难以理解，都是固定的写法，写的时候参考即可

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

冷丁_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax详解(二)

本节我们继续完成一个demo，利用Ajax获得后端的数据并展示到前端AjaxController.java @RequestMapping("/a2") public List<User> a2(){ List<User> userList=new ArrayList<User>(); //添加数据 userList.add(new User("java",1,"a")); userList
复制链接

扫一扫

专栏目录