ajax-json异步加载实现数据查询

最新推荐文章于 2024-04-21 10:54:42 发布

哇哦萤火虫

最新推荐文章于 2024-04-21 10:54:42 发布

阅读量142

点赞数

文章标签： ajax json jsp

本文链接：https://blog.csdn.net/m0_49562228/article/details/118255695

版权

1.搭建好SSM框架运行环境。

2.编写好控制器。

@RequestMapping("/a2")
    @ResponseBody
    public String ajax2(){
        List<User> usersList = userService.queryUserList();
        return JsonUtils.getJson(usersList); //返回json字符串,这里是我自己定义的工具包，可以使用其他jar包实现
    }

3.编写前端jsp页面，使用ajax代码，这里使用jQuery引进ajax。

<%@ 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 type="text/javascript">

        function cl(){
            $.post({
                url:"${pageContext.request.contextPath}/a2",
                success:function (data){   //从服务端获取的数据
                    console.log(data);
                    var ht="";
                    var userList=JSON.parse(data);
                    console.log(userList);
                    for (let i=0;i<userList.length;i++){
                        ht+="<tr>"+
                            "<td>"+userList[i].userCode+"</td>"+
                            "<td>"+userList[i].userName+"</td>"+
                            "<td>"+userList[i].sex+"</td>"+
                            "<td>"+userList[i].age+"</td>"+
                            "<td>"+userList[i].work+"</td>"+
                            "</tr>";
                    }
                    $("#content").html(ht);
                }
            });
        }

    </script>
</head>
<body>
<input type="button" id="btn" value="获取数据" οnclick="cl()">
<table width="80%" align="center">

    <thead>
    <tr>
        <th>用户编号</th>
        <th>用户名字</th>
        <th>用户性别</th>
        <th>用户年龄</th>
        <th>用户职业</th>
    </tr>
    </thead>
    <tbody id="content">

    </tbody>
</table>

</body>
</html>

结果：
在这里插入图片描述
开始时页面并无数据，点击获取数据，页面不刷新，实现数据异步加载。

哇哦萤火虫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax-json异步加载实现数据查询

1.搭建好SSM框架运行环境。2.编写好控制器。@RequestMapping("/a2") @ResponseBody public String ajax2(){ List<User> usersList = userService.queryUserList(); return JsonUtils.getJson(usersList); //返回json字符串,这里是我自己定义的工具包，可以使用其他jar包实现 }3.编写前端
复制链接

扫一扫