将数据转换为 HTML 表的位置：PHP / Javascript /答案

【问题标题】：Where to convert data to HTML-table: PHP / Javascript /将数据转换为 HTML 表的位置：PHP / Javascript /
【发布时间】：2012-06-18 11:27:37
【问题描述】：

我需要关于如何编写我的网站的建议。

在我的数据库中，我有一些数据想要动态加载到我网站上的不同框架中。问题是：我在哪里将原始数据转换为 HTML 代码？

我目前看到以下选项：

在 PHP 函数中将其转换为 HTML 并通过我的页面上的 Ajax 加载它
通过 Ajax 获取原始数据并将其在 Javascript 中转换为 HTML 代码
手动编写 HTML 表格，然后通过 Ajax 将数据插入其中

所有这三个选项都有其缺点 - 例如，我需要能够使用 jQuery 选择表格行，当表格 HTML 代码使用 Ajax 加载到页面中时，我不知道该怎么做。 . 手动编写 HTML 表格可以解决这个问题，但表格需要有可变数量的行。

有没有我还没有想到的选项？对我还有什么建议吗？

【问题讨论】：

“将原始数据转换为 HTML 代码”到底是什么意思。它是二进制数据还是什么？ ;））开玩笑。你想用这些数据做什么？

标签： php jquery ajax database html-table

【解决方案1】：

这取决于，但除非行数和列数不变，否则我会选择 1 或 2。

选项 1 的优点是在 PHP 中生成 HTML 比在 Javascript 中更实用，因此如果您需要快速完成某些操作，或者您已经在服务器端安装了模板系统，请尝试选项 1。这种方法的一个巨大缺点是您必须信任服务器才能发送“正常”的 HTML；如果你不使用 SSL 进行 AJAX 调用，一个简单的 MITM 攻击可以很容易地注入可利用的 XSS 代码，如果服务器由于某种原因发送了损坏的 HTML，则很难检测到并且可能无法从中恢复。

所以通常情况下，我更喜欢选项 2。此时我什至不会打扰 HTML，而是直接操作 DOM，即：

循环遍历数据行；对于每一行，构造一个 tr 元素并将其附加到表的主体
- 在列上循环；对于每一行，构造一个 td 元素并将其附加到 tr ；使用.text() 向单元格添加内容。

示例代码：

function fillTable(data) {
    var tbody = $('<tbody/>');
    data.each(function (row) {
        var tr = $('<tr/>');
        tbody.append(tr);
        row.each(function (cell) {
            var td = $('<td/>');
            tr.append(td);
            td.text(cell);
        });
    });
    $('#myTable>tbody').replaceWith(tbody);
}

这样，您不必担心 HTML 编码（以及 XSS），因为您直接注入 DOM 节点 - 浏览器根本不会进行任何 HTML 解析。

【讨论】：

【解决方案2】：

我会使用 1 和 3 方法的某种组合，使用某种文件缓存或内存缓存，但不使用数据库（必须更慢）。您必须为所需的块生成一次带有所需参数的 html 并将其缓存到文件中，因此它类似于（伪代码）：

$aParams = ... lets tell that this is your params here;
$sBlockKey = 'my_block_'.md5($aParams);
if (cache::exists($sBlockKey)){
  $sMyBlock = cache::get($sBlockKey);
} else {
  $sMyBlock = generateMyBlockHtml($aParams);
  cache::add($sBlockKey, $sMyBlock);
}

return $sMyBlock;

这样你可以通过ajax加载它然后如果你需要。

【讨论】：

【解决方案3】：

我正在使用这两个 jquery 插件 http://datatables.net/ 和 http://www.trirand.com/blog/ 这可能是一种过载，但是您将获得相当灵活的方式来在页面上显示动态加载数据的表格，并且它们都有很好的方式来处理行选择、格式化等。

【讨论】：