怎么在html文件中，通过js获取json数据并以表格形式输出

这是我的.jsp文件：

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
     url="jdbc:mysql://localhost/login"
     user="root"  password="147852369"/>
<sql:query dataSource="${snapshot}" var="result">
SELECT * from Employees;
</sql:query>

  <json:array name="items" var="item" items="${result.rows}">  
    <json:object>  
      <json:property name="id" value="${item.id}"/>  
      <json:property name="firstname" value="${item.first}"/>  
      <json:property name="lastname" value="${item.last}"/>  
      <json:property name="age" value="${item.age}"/> 
    </json:object>  
   </json:array>

</body>
</html>

怎么在html文件中，通过js将json数据获取并以表格形式输出

如果是js获取数据，那么其实就是异步加载，
1服务端提供一个json数据的接口
2,页面通过ajax形式方式数据接口
3,根据返回值填入到表格中

博客地址：http://blog.csdn.net/w172087242/article/details/52062955
下载地址：http://download.csdn.net/download/w172087242/9589681
里面有如何把json变成表格的demo，虽然主要功能是实现编辑表格

希望可以帮到你...

特别简单，通过从数据库查出来的list，然后后台转换为json，最后通过AJAX接受返回值json，绑定表格，下面是绑定表格的代码：
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 10 },
{ field: 'StartDate', title: '开始日期', width: 181 },
{ field: 'EndDate', title: '结束日期', width: 181 },
{ field: 'Id', title: 'ID', width: 100, hidden: 'true' },
{ field: 'SchoolName', title: '毕业学校', width: 200 },
{ field: 'TeacherName', title: '证明人', width: 160 },
{
field: 'Operation', title: '重新设置', width: 115,
formatter: function (value, row, index) {
var e = '编辑 ';
return e;
}
}

    ]],

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>



Insert title here
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/login" user="root" password="147852369"/> <sql:query dataSource="${snapshot}" var="result"> SELECT * from Employees; </sql:query> <json:array name="items" var="item" items="${result.rows}"> <json:object> <json:property name="id" value="${item.id}"/> <json:property name="firstname" value="${item.first}"/> <json:property name="lastname" value="${item.last}"/> <json:property name="age" value="${item.age}"/> </json:object> </json:array> //比如你从数据库中查出来的json叫做jsonData initTable(); function initTable () { var html = '<table border=1>'; for (var j in jsonData) { var obj = jsonData[j]; html += '<tr>' html += '<td>' + obj.id + '</td>'; html += '<td>' + obj.firstname + '</td>'; html += '<td>' + obj.=lastname + '</td>'; html += '<td>' + obj.age + '</td>'; html += '</tr>' } html += '</table>'; $('#jsontable').append(html); }


这个是我给你改过之后的，因为你的数据库返回值，我没有看到处理，所以那里你自己写一下吧！希望对你有用，楼主给个辛苦分吧

我把你写的那个东西，写到了js里面，然后通过js插入了一个table到body的div里面

可以参考 jquery.datatable.js