php将json渲染到前端table,科学网—Ajax异步获取Json格式数据渲染Table控件 - 程冬的博文...

在前面的博文中，已经提及到Ajax中的相关属性和方法以及Json格式的数据文件，本文将尝试以AppServ为应用服务器，通过Ajax异步请求(GET和POST)的方式获取服务器端JSON格式的数据，然后利用Json数据创建Table。此例简单，编写此文的目的一方面可以学习和巩固JavaScript等相关知识，另一方面，还可以为我们对控件的开发提供一种良好的思路。

1. 编写简单的Json格式的数据文件，内容如下：

{

tableHeader: ['序号', 'ID', '时间', '金额']

}

2. 编写HTML页面，核心内容如下：

这里需要引入JavaScript的基础类库——prototype.js，prototype.js是对JavaScript的扩展，能够很好的支持Ajax与服务器端的通信，是一种具有很大实用价值的JavaScript类库。

3. 编写creatXHR函数，返回Ajax XHR(XMLHttpRequest)对象，核心内容如下：

function createXHR(){

if (typeof XMLHttpRequest != "undefined") {

return new XMLHttpRequest();

} else if (typeof ActiveXObject != "undefined") {

if (typeof arguments.callee.activeXString != "String") {

var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i , len;

for (var i = 0, len = versions.length; i < len; i++){

try {

new ActiveXObject(versions[i]);

arguments.callee.activeXString = versions[i];

break;

} catch (error) {

alert("sorry, something is error!");

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

} else {

throw new Error("No XHR object available.");

}

}

4. 创建XHR对象并向服务器端发送请求，响应成功后返回JSON格式的数据，核心内容如下：

function startRequest(){

try{

req.onreadystatechange = handleStateChange;

req.open("GET", "table.json", true);

//接收请求主体发送给服务器的参数,不发送需要将其置为null.

req.send(null);

}catch(exception){

alert("发送请求错误！");

}

}

function handleStateChange(){

//检测请求/响应过程的当前活动阶段

if(req.readyState == 4){

if ((req.status >= 200 && req.status < 300) || req.status == 304){

// 取得返回字符串

var resp = req.responseText;

// 构造返回JSON对象的方法

var func = new Function("return " + resp);

// 得到JSON对象

var json = func();

// 显示返回结果

tableHeader = json.tableHeader;

} else {

alert("Request was unsuccessfull: " + req.status);

}

}

}

5. 生成Table，内容如下：

//生成表格

createTable: function(tableHeader, tableData){

if (tableHeader == null) {

return "";

}

var tableHTML = '

tableHTML += '

';

for(var i=0; i

tableHTML += '

' + tableHeader[i] + '';

}

tableHTML += '

';

if(tableData != null){

for(var i=0; i

tableHTML += '

';

for(var j=0; j

tableHTML += '

' + tableData[i][j] + '';

}

tableHTML += '

';

}

}

tableHTML += '

';

return tableHTML;

}

6. 启动服务，在地址栏输入：http://localhost:8888/4/1/，查看效果(如下图所示)。

转载本文请联系原作者获取授权，同时请注明本文来自程冬科学网博客。

链接地址：http://blog.sciencenet.cn/blog-448935-604227.html

上一篇：利用JS生成分页式table

下一篇：关于prototype的一个Demo