Spring Boot使用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......）

 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<Integer> 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<Integer> getJichutongji(){
 8         List<Integer> 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<String,String> xiaoguoTable(){
 9 
10         Map<String,String> map=new HashMap<>();
11         List<Integer> 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中處理數據並刷新前端顯示：

<script type="text/javascript">
function refurbishIndex(){

    var optionJson=[];
    $.ajax({
        type:"post",
        url:"/easyuiIndexTable",
        data:{},
        async: false,
        success:function (data) {
            optionJson=data;

            var str="";

            str+="<tr>"+
                "<td>"+optionJson.totalNumber+"</td>"+
                "<td>"+optionJson.actualNumber+"</td>"+
                "<td>"+optionJson.highScore+"</td>"+
                "<td>"+optionJson.lowScore+"</td>"+
                "<td>"+optionJson.avgScore+"</td>"+
                "<td>"+optionJson.variance+"</td>"+
                "</tr>";

            document.getElementById("tbodydata").innerHTML=str;


        }
    });
}
</script>

　　前端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>1111</td>
18                     <td>2222</td>
19                     <td>3333</td>
20                     <td>4444</td>
21                     <td>5555</td>
22                     <td>6666</td>
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