SpringMVC(21) —— Ajax异步加载数据

最新推荐文章于 2022-11-04 23:11:09 发布

原来是小别扇

最新推荐文章于 2022-11-04 23:11:09 发布

阅读量108

点赞数

分类专栏： springmvc 文章标签： ajax js jquery springmvc

本文链接：https://blog.csdn.net/Jzandth/article/details/108741838

版权

springmvc 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

1.需求

通过点击一个按钮，按钮触发jquery事件，事件的操作就是去接收后端数据

2.代码实现

POJO

package com.thhh.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

视图

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
      $(function () {
          $("#btn").click(function (){
              $.post({
                  url:"${pageContext.request.contextPath}/t2",
                  success:function (data){
                      console.log(data)
                      let 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>"
                      }
                      console.log(html)
                      $("#table").html(html);
                  }
              });
          });
      })

    </script>
</head>
<body>
    <input type="button" id="btn" value="加载数据"/>
    <table style="width: 30%">
        <tr>
            <td>名称</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tbody id="table">
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

controller

    @RequestMapping("/t2")
    public List<User> test02(){
        System.out.println("test02==>");
        List<User> list = new ArrayList<User>();
        list.add(new User("张三",18,"女"));
        list.add(new User("李四",20,"男"));
        list.add(new User("王五",22,"女"));
        return list;
    }

注意：异步交互就是前端浏览器和后端服务器的直接交互，所以返回值不需要走视图解析器，所以我们的controller类应该使用注解@RestController，如果走了视图解析器，那么异步交互将得不到响应数据

3.测试

在这里插入图片描述

原来是小别扇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC(21) —— Ajax异步加载数据

目录1.需求2.代码实现3.测试1.需求通过点击一个按钮，按钮触发jquery事件，事件的操作就是去接收后端数据2.代码实现POJOpackage com.thhh.pojo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;@Data@AllArgsConstructor@NoArgsConstructorpublic class User {
复制链接

扫一扫