码迷,mamicode.com
首页 > 编程语言 > 详细

SpringBoot | Thymeleaf | 局部更新

时间:2018-12-18 10:54:42      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:lsp   jquery   lis   www.   西红柿   ble   tab   his   cli   

建立一个实体类:

public class Fruit {
    int id;
    String name;

    public Fruit() {
    }

    public Fruit(int id, String name) {
        this.id = id;
        this.name = name;
    }
  
   //省略get和set方法       
}

 

建立一个控制类:

package org.project.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;


@Controller
public class FruitController {

    @RequestMapping("/fruit")
    public String fruit(Model model){
        return "fruit";
    }

    @RequestMapping("/fruit/detail")
    public String detail(Model model,int id) {

        List<Fruit> fruits = new ArrayList<>();

        if(id == 0) {
           String[] strings={"香蕉","苹果","凤梨","西瓜"};
           for(int i = 1; i <= strings.length; i++) {
               fruits.add(new Fruit(i,strings[i-1]));
           }
        } else if(id == 1) {
            String[] strings={"菠萝","草莓","西红柿","黑莓","百香果","葡萄"};
            for(int i = 1; i <= strings.length; i++) {
                fruits.add(new Fruit(i,strings[i-1]));
            }
        }
        model.addAttribute("fruits",fruits);
        return "fruit::fruit-list";
    }
}

  

前端代码:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thyleaf</title>
    <script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
    <script>
        function ceshi1() {
            $(‘#fruit-list‘).load("/fruit/detail?id=0");
        }
        function ceshi2() {
            $(‘#fruit-list‘).load("/fruit/detail?id=1");
        }
    </script>
</head>
<body>
    <button onclick="ceshi1()">测试1</button>
    <button onclick="ceshi2()">测试2</button>

    <div id="fruit-list" style="text-align: center;margin:0 auto;width: 900px" th:fragment="fruit-list">
        <table width="100%" border="1" cellspacing="1" cellpadding="0">
            <thead>
                <th>ID</th>
                <th>水果名</th>
            </thead>
            <tbody>
                <tr th:each="fruit : ${fruits}">
                    <td th:text="${fruit.id}"></td>
                    <td th:text="${fruit.name}"></td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

  

 效果:

技术分享图片

 

技术分享图片

 

SpringBoot | Thymeleaf | 局部更新

标签:lsp   jquery   lis   www.   西红柿   ble   tab   his   cli   

原文地址:https://www.cnblogs.com/jj81/p/10134859.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!