SpringBoot使用AJAX从数据库读取数据异步刷新前端表格

　　近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能，因为表格只占页面的一小部分，不希望整个也页面都随之刷新，所以首先想到了使用AJAX来实现。

　　以下介绍解决方法（请忽视拼音命名）。

　　筛选前先随便给table添加一些数据：

　　首先在domin中定义相应的数据结构，这里使用之前已经定义好的一个类，里面包含了我们所需的几个属性，所以就直接抱过来

1 public class JichutongjiTable {
2 private int kaoshirenshu;
3 private int yingdaorenshu;
4 private double pingjunfen;
5 private double fangcha;
6 private int zhishidian;
7 private int zuigaofen;
8 private int zuidifen;
9
10 public int getZuigaofen() {
11 return zuigaofen;
12 }
13
14 public void setZuigaofen(int zuigaofen) {
15 this.zuigaofen = zuigaofen;
16 }
17
18 public int getZuidifen() {
19 return zuidifen;
20 }
21
22 public void setZuidifen(int zuidifen) {
23 this.zuidifen = zuidifen;
24 }
25
26 public int getKaoshirenshu() {
27 return kaoshirenshu;
28 }
29
30 public void setKaoshirenshu(int kaoshirenshu) {
31 this.kaoshirenshu = kaoshirenshu;
32 }
33
34 public int getYingdaorenshu() {
35 return yingdaorenshu;
36 }
37
38 public void setYingdaorenshu(int yingdaorenshu) {
39 this.yingdaorenshu = yingdaorenshu;
40 }
41
42 public double getPingjunfen() {
43 return pingjunfen;
44 }
45
46 public void setPingjunfen(double pingjunfen) {
47 this.pingjunfen = pingjunfen;
48 }
49
50 public double getFangcha() {
51 return fangcha;
52 }
53
54 public void setFangcha(double fangcha) {
55 this.fangcha = fangcha;
56 }
57
58 public int getZhishidian() {
59 return zhishidian;
60 }
61
62 public void setZhishidian(int zhishidian) {
63 this.zhishidian = zhishidian;
64 }
65 }

　　接着在mapper中定义定义所需的方法从数据库中取数据（请忽视乱糟糟的SQL&＃8230;&＃8230;）

1 @Component
2 public interface JichutongjiMapper {
3 //获取基础信息
4 @Select("SELECT COUNT(*) as kaoshirenshu FROM (SELECT * FROM fenshu GROUP BY xuehao HAVING SUM(xueshengdefen)<>0) as t1 UNION ALL SELECT COUNT(*) as yingdaorenshu FROM (SELECT * FROM fenshu GROUP BY xuehao) as t1 UNION ALL SELECT FLOOR(sum(a)/COUNT(a)) as pingjunfen FROM (SELECT sum(xueshengdefen) as a FROM fenshu GROUP BY xuehao) AS b UNION ALL SELECT variance(a) as fangcha FROM (SELECT sum(xueshengdefen) as a FROM fenshu GROUP BY xuehao) AS b")
5 public List getJichutongji();
6 //获取最高分
7 @Select("SELECT MAX(tt.chengji) AS zuigaofen FROM (SELECT SUM(xueshengdefen) AS chengji FROM fenshu GROUP BY xuehao) AS tt")
8 public Integer getMaxMark();
9 //获取最低分
10 @Select("SELECT MIN(tt.chengji) AS zuidifen FROM (SELECT SUM(xueshengdefen) AS chengji FROM fenshu GROUP BY xuehao) AS tt")
11 public Integer getMinMark();
12 }

　　下一步编写service供controller调用

1 @Service
2 public class JichuqingkuangService {
3 @Autowired
4 private JichutongjiMapper jichutongjiMapper;
5 @Autowired
6 private ShitifenxiMapper shitifenxiMapper;
7 public List getJichutongji(){
8 List list= jichutongjiMapper.getJichutongji();
9 return list;
10 }
11 public Integer getMaxMark(){
12 return jichutongjiMapper.getMaxMark();
13 }
14 public Integer getMinMark(){
15 return jichutongjiMapper.getMinMark();
16 }
17 }

　　然后，在controller中调用service并按规定路径返回给前台所需的数据

1 @Controller
2 public class IndexController {
3
4 @Autowired
5 private JichuqingkuangService jichuqingkuangService;
6 　　 @PostMapping(value="/easyuiIndexTable")
7 @ResponseBody
8 public Map xiaoguoTable(){
9
10 Map map=new HashMap<>();
11 List list= jichuqingkuangService.getJichutongji();
12 String highScore = ""+jichuqingkuangService.getMaxMark();
13 String lowScore = ""+jichuqingkuangService.getMinMark();
14
15 map.put("totalNumber",""+list.get(0));
16 map.put("actualNumber",""+list.get(1));
17 map.put("highScore",highScore);
18 map.put("lowScore",lowScore);
19 map.put("avgScore",""+list.get(2));
20 map.put("variance",""+list.get(3));
21
22
23 return map;
24 }
25 }
26

　　在JS中处理数据并刷新前端显示：

　　前端HTML页面table代码：

1 <table style="width:100%;height:190px">
2 <tr>
3 <td style="width:100%">
4 <table>
5 <thead>
6 <tr class="cen">
7 <th>实际人数（单位：人）th>
8 <th>应到人数（单位：人）th>
9 <th>最高分（单位：分）th>
10 <th>最低分（单位：分）th>
11 <th>考试平均分（单位：分）th>
12 <th>考试方差（单位：1）th>
13 tr>
14 thead>
15 <tbody id="tbodydata">
16 <tr>
17 <td>1111td>
18 <td>2222td>
19 <td>3333td>
20 <td>4444td>
21 <td>5555td>
22 <td>6666td>
23 tr>
24
25 tbody>
26 table>
27 td>
28 tr>
29
30 table>

　　最后，在button中调用此刷新方法：

<button onclick="refurbishIndex()">筛选button>　

　　至此，便完成了数据读取，传递，刷新的整个流程，点击筛选按钮后，table表格内的数据实现刷新

参考博文：http://blog.csdn.net/love254443233/article/details/48468397

转:https://www.cnblogs.com/liesun/p/7410130.html