后端list集合中的數據傳遞到前台HTML中顯示（表格形式）

本文轉載自查看原文 2020-04-22 14:18 1651 Web前端/ 前端表格數據渲染

關鍵字：web項目中前后台數據傳遞問題

在前端數據傳輸到前端的時候如何將數據渲染到表格上面，看到一個博主寫的非常詳細與實用，特地記錄一下。

一、HTML頁面通過ajax發送http請求

1，前端有個普通的HTML頁面，如下。

（頁面引入了jquery，頁面有個表格）

2，通過ajax發送請求

 1 window.onload(function requestData(){
 2         $.ajax({
 3             url: "要訪問的地址",
 4             type: "post",
 5             dataType: "json",
 6             success: function(data){
 7                 /*這個方法里是ajax發送請求成功之后執行的代碼*/
 8                 showData(data);//我們僅做數據展示
 9             },
10             error: function(msg){
11                 alert("ajax連接異常："+msg);
12             }
13         });
14     });

3，后台的數據

 1 @RequestMapping(value="/queryAllStudent")
 2     public void query(HttpServletResponse resp) {
 3         try {
 4             /*list集合中存放的是好多student對象*/
 5             List<Student> students = userService.getAllStudentInfo();
 6             /*將list集合裝換成json對象*/
 7             JSONArray data = JSONArray.fromObject(students);
 8             //接下來發送數據
 9             /*設置編碼，防止出現亂碼問題*/
10             resp.setCharacterEncoding("utf-8");
11             /*得到輸出流*/
12             PrintWriter respWritter = resp.getWriter();
13             /*將JSON格式的對象toString()后發送*/
14             respWritter.append(data.toString());
15         } catch (Exception e) {
16             e.printStackTrace();
17         }
18     }

1 public class student {
2     private int id;//id
3     private String name;//姓名
4     private String password;//密碼
5 
6     //省略get set方法。。。  
7 }

4，前台展示數據（表格形式）

1 //展示數據
2 function showData(data) {
3 var str = "";//定義用於拼接的字符串
4 for (var i = 0; i < data.length; i++) {
5 //拼接表格的行和列
6 str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
7 //追加到table中
8 $("#tab").append(str); }
9 }

5，至此，完成了數據的傳遞（利用for循環，將數據追加到表格）

二、數據傳送的流程

前台(html)發送ajax請求 --> 后台servlet中接受到請求，然后響應數據(來自數據庫或其他) --> 前台（HTML）

ajax接受數據，處理數據(以表格顯示).

最后測試一下顯示效果

來自轉發https://www.cnblogs.com/baijinqiang/p/8594041.html原文，謝謝，純為了個人保存紀念

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 后端list集合中的數據傳遞到前台HTML中顯示（表格形式） java代碼中后台向前台傳遞list或map集合案例 python之將數據以表格形式寫入html express后端和fetch前端的json數據傳遞 python+flask框架——前后端數據傳遞 json數據轉為對象，一般在前台把數據傳回后端中使用轉https://www.cnblogs.com/zxtceq/p/6610214.html react-redux中的數據傳遞 WinForm中窗體間的數據傳遞（二） js實現Html頁面間跳轉之數據傳遞 Fragment的數據傳遞