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

關鍵字：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);         }
10     }

         5，至此，完成了數據的傳遞

二、數據傳送的流程

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

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

         最后測試一下顯示效果

 

謝謝！