创建 HTML：PHP 服务器端与 jQuery 客户端 [关闭]答案

【问题标题】：Creating HTML: PHP server-side vs. jQuery client-side [closed]创建 HTML：PHP 服务器端与 jQuery 客户端 [关闭]
【发布时间】：2011-01-19 10:27:16
【问题描述】：

这是一个设计问题。我有需要进入 HTML 表的数据，稍后将由用户操作。基本上，用户将能够选择表格行中的项目。

我有两个选择 - 在这两种情况下我都使用 AJAX 来获取数据：

在服务器端使用 PHP 创建 HTML 代码，将其作为 HTML 发送到客户端。然后用户使用 Javascript（本质上是 jQuery）来操作表格。
使用 JSON 将原始数据发送到客户端，然后使用 jQuery 创建 HTML，然后由用户对其进行操作。

从设计/易于编码/美观的角度来看，推荐哪种方法？感谢您提供任何见解。

【问题讨论】：

Javascript 中的 HTML 看起来很糟糕。
一般经验法则：服务器端的内容，客户端的行为。
但是 HTML 既不是内容也不是行为，它是表现形式。
如果 html 内容和 实际数据 比率太高，则使用 json.. 如果 html 与数据单选几乎相等，则使用 php 端 html 生成。

标签： php jquery html ajax

【解决方案1】：

为什么要用 PHP 生成 HTML：

JavaScript 应该定义行为，而不是内容。
在 JavaScript 中创建需要更多标记（多行字符串不像在 PHP 中那么容易）。
如果您的 HTML 是在多个地方（PHP 和 JS）生成的，则更难维护。
您可以使用 jQuery 的 DOM 操作函数来创建 HTML，但从长远来看，您是在自取其辱。
在服务器上创建 HTML 比在浏览器上创建 HTML 更快（在计算意义上）。
使用 PHP 循环更容易 - 生成表格标记很容易。
如果您在页面加载时输出标记，则如果用户禁用了 JavaScript，您将保留某种可战斗性。

为什么要用 jQuery 生成 HTML：

您会节省一些带宽。
绑定事件可能更简单。

所以，我赞成第一个选项，用 PHP 生成 HTML。

两种方法的视觉比较，创建一个简单的表格。

选项 1，使用 PHP：

// PHP

$html = '<table>';    
foreach($data as $row) {
    $html .= '<tr>';
    $html .= '<td><a href="#" class="button">Click!</a></td>';
    $html .= '<td>'.$row['id'].'</td>';
    $html .= '<td>'.$row['name'].'</td>';
    $html .= '</tr>';
}
$html .= '</table>'; 
echo $html;
?>

// jQuery

$('#container').load('handler.php', function() {
    $('#container a.button').click(function() {
        // Do something
    });
});

选项2，使用jQuery：

// PHP

echo json_encode($data);

// jQuery

$.ajax({
    url: 'handler.php',
    dataType: 'json',
    success: function(data) {
        var table = $('<table />');

        var len = data.length;
        for(var i = 0; i < len; i++) {
            var row = $('<tr />');
            var a = $('<a />').attr('href', '#').addClass('button');

            row.append($('<td />').append(a));
            row.append($('<td />').html(data[i].id);
            row.append($('<td />').html(data[i].name);

            table.append(row);
        }

        table.find('.button').click(function() {
            // Do something
        });

        $('#container').html(table);
    }
});

从设计/易于编码/美观的角度来看，我肯定会说使用 PHP 方法。

【讨论】：

一些优点，但您认为一台服务器完成这项工作的计算速度真的比数千个单独的客户端更快吗？
@patrick，我说的是单个页面加载的计算速度——如果在服务器上创建 HTML，内容加载速度会更快。但是当然，如果将最大数量的计算转移到客户端，服务器总是会更容易。
嗯。如果您想在相同的理由（和速度）上进行比较，您也应该在 javascript 中构建一个字符串数组，然后推送元素。最后，加入他们并立即分配。
+1 我完全赞成这个。我们在客户的机器上施加了足够的负载，因为现在有大量的 JavaScript 东西很常见。
+1 以确保答案的完整性，但我会删除“服务器上更快”这一点，因为这不是这里真正要考虑的一点。你自己说过，不管选择如何，最好将计算扔给客户端。

【解决方案2】：

如果生成的 HTML 与页面 HTML 相同，您可以利用现有的模板代码生成相同的 HTML，减少代码重复。

否则，JSON 通常更常见，因为它往往更紧凑，它允许您创建节点并随时为它们分配事件处理程序等非 HTML 属性。

但是，如果您通过创建 HTML 字符串来创建新节点，则必须使用 HTML 编码来确保正确转义任何 <、& 或引号。在 JavaScript 中没有像 PHP 中的 htmlspecialchars 这样的内置函数；写一个很简单，但似乎没有人打扰。结果是 jQuery 应用程序充满了客户端跨站点脚本安全漏洞，就像我们开始在修复服务器端 XSS 问题方面取得一些进展一样。

【讨论】：

【解决方案3】：

可能对两者都提出同样令人信服的论点，但如果您选择 2，您可能会通过管道发送更少的数据。

【讨论】：

【解决方案4】：

我真的很喜欢在客户端将这样的东西放在一起的想法。我发现JavaScriptMVC 是一个很好的框架（2.0 版本基于 jQuery），因为它有客户端视图模板（尽管不是每个人都喜欢这种方法）。

我发现单独使用 jQuery 创建客户端视图非常复杂（因为这不是它的本意），所以如果你可以将所有内容放在 PHP 中的服务器端，你可能会更好以这种方式，应用程序同样具有动态性。

【讨论】：

【解决方案5】：

这两个选项都有优点和缺点，但是 andras 很好地说明了内容是否需要被索引/可搜索。我个人会选择选项 1，因为我相信架构会更容易生成。

【讨论】：