后端list集合中的数据传递到前台HTML中显示（表格形式）

关键字：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，后台的数据

        4，前台展示数据（表格形式）

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

         5，至此，完成了数据的传递（利用for循环，将数据追加到表格）

二、数据传送的流程

       前台(html)发送ajax请求 --> 后台servlet中接受到请求，然后响应数据(来自数据库或其他) --> 前台（HTML）

ajax接受数据，处理数据(以表格显示).

         最后测试一下显示效果

来自转发原文，谢谢，纯为了个人保存纪念