spring boot（二）Ajax前后台交互

最新推荐文章于 2023-04-03 20:56:06 发布

WX_01

最新推荐文章于 2023-04-03 20:56:06 发布

阅读量8.2k

点赞数 3

本文链接：https://blog.csdn.net/qq_39719883/article/details/82898467

版权

a大体结构

一、后台传前台

先建一个实体类：NameBean

public class NameBean {
    private String name;
    private String  kecheng;
    private String   fenshu;
    private int  id;

    public NameBean() {
    }

    public NameBean(String name, String kecheng, String fenshu, int id) {
        this.name = name;
        this.kecheng = kecheng;
        this.fenshu = fenshu;
        this.id = id;
    }
/get/set 略

新建一个FirstController

@Controller
@RequestMapping(value = "/users")
public class FirstController {
    @Autowired
    public QueryName queryName;
    /*向前台传参*/
    @RequestMapping(value = "/user")
    public ModelAndView index(){
        List <NameBean> lists =new ArrayList();
        NameBean nameBean=new NameBean("小明","12","11",1);
        lists.add(nameBean);
        nameBean=new NameBean("小明","13","11",1);
        lists.add(nameBean);
        nameBean=new NameBean("小明","14","11",1);
        lists.add(nameBean);

        ModelAndView modelAndView=new ModelAndView("/query");
        modelAndView.addObject("lists",lists);
        return modelAndView;
    }}

新建一个HTML页面 query.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 1000px;" >
    <h3 align="center">第一个项目</h3>
    <table width="100%" border="1" cellspacing="1" cellpadding="0">
        <tr>
            <td>姓名</td>
            <td>课程</td>
            <td>分数</td>
            <td>编号</td>
        </tr>
        <!--/*@thymesVar id="lists" type=""*/-->
        <tr  th:each="users : ${lists}">
            <td th:text="${users.name}">作者</td>
            <td th:text="${users.kecheng}">22</td>
            <td th:text="${users.fenshu}">22</td>
            <td th:text="${users.id}">22</td>
        </tr>
    </table>
</div>
</body>
</html>

注意：在pom.xml要增加如下配置注释内容得有 users.后面有红线不影响运行

<dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.0.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring4</artifactId>
            <version>3.0.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

打开http://localhost:9090/users/user 后台数据就会爱前台呈现

二、前后交互

需要一个js

在html里写个表单

然后在head标签里写function tijiao(){}

后台在FristController接收

访问http://localhost:9090/users/query，

查看后台和前台得返回，一个简单得数据交互完成

WX_01

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
6
评论
spring boot（二）Ajax前后台交互

a大体结构一、后台传前台先建一个实体类：NameBeanpublic class NameBean { private String name; private String kecheng; private String fenshu; private int id; public NameBean(...
复制链接

扫一扫