快速入门Ajax实现异步交互

最新推荐文章于 2022-10-13 13:56:19 发布

咸鱼_翻身

最新推荐文章于 2022-10-13 13:56:19 发布

阅读量2.1k

点赞数 2

分类专栏： springmvc 文章标签： ajax 前端 javascript 1024程序员节

本文链接：https://blog.csdn.net/aaa123_456aaa/article/details/120931891

版权

springmvc 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.首先创建一个简单的Javaweb环境。当然这些有些是多余的，不用太在意，按照自己配好的环境就好了。这里介绍的是一个理念。

在这里插入图片描述

2.直接看controller层的代码部分

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

        userList.add(new User("吴",18,"男"));
        userList.add(new User("陈",18,"男"));
        userList.add(new User("彭",18,"男"));
        userList.add(new User("陈",18,"男"));
        userList.add(new User("金",18,"男"));
        userList.add(new User("陈",18,"男"));

        return userList;
    }

3.再来看jsp前端部分

<%@ 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:"${pageContext.request.contextPath}/a2",
                success:function (data){
                    //定义变量接收内容
                    var obj = "";
                    //使用for循环遍历数据
                    for (var i = 0;i<data.length;i++) {
                        obj += "<tr>"+"<td>"+data[i].name+"</td>"+"<td>"+data[i].age+"</td>"+"<td>"+data[i].sex+"</td>"+"</tr>";
                    }
                    //将结果添加到表格中
                    $("#tbody1").html(obj);
                }
            })
        })
        })
    </script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="tbody1">
    </tbody>
</table>
</body>
</html>

ajax是实现异步交互的一个工具而已，实现的是页面无刷新也能加载数据，不用说后端来重定向转发之类的。

4.我们可以看见基本是前端的代码，前端点击按钮，之后触发事件/a2，后台再来响应事件，那么后台响应事件产生数据就会传到前端的success:function (data)，然后我们再来遍历出data放到页面当中不就好了吗，其实原理很简单，就是前端发请求->后端接收产生数据->前端处理数据，只不过这个过程我们使用了Ajax让他页面无刷新罢了。

在这里插入图片描述

咸鱼_翻身

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
快速入门Ajax实现异步交互

1.首先创建一个简单的Javaweb环境。当然这些有些是多余的，不用太在意，按照自己配好的环境就好了。这里介绍的是一个理念。2.直接看controller层的代码部分 @RequestMapping("/a2") public List<User> a2(){ List<User> userList = new ArrayList<User>(); userList.add(new User("吴",18,"男"));
复制链接

扫一扫