Question

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

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

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

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

Answer 1

为什么要在PHP中生成HTML：

JavaScript应该定义行为，而不是内容。
在JavaScript中创建需要更多标记（多行字符串不像PHP那么容易）。
如果您的HTML是在多个地方生成的（PHP＆amp; 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方法。

Answer 2

在Why is it a bad practice to return generated HTML instead of JSON? Or is it?中进行了类似的讨论，并提出了本主题中未提及的一些优点。

Answer 3

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

否则，JSON通常更常见，因为它往往更紧凑，它允许您创建节点并在其中为其分配非HTML属性（如事件处理程序）。

但是，如果您通过创建HTML字符串来创建新节点，则必须使用HTML编码来确保正确转义任何<，&或引号。 PHP中的htmlspecialchars之类的JavaScript中没有内置函数可以执行此操作;写一个是非常微不足道的，但没有人似乎很烦。结果是jQuery应用程序充满了客户端跨站点脚本安全漏洞，正如我们开始在修复服务器端XSS的东西方面取得一些进展。

Answer 4

同样可能对两者都提出相同的论据，但如果你选择2，你可能会向管道发送更少的数据。

Answer 5

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

单独使用jQuery我发现创建客户端视图非常复杂（因为这不是它的意思），所以你最好把所有东西放在PHP的服务器端，如果你能保持你的应用同样具有动态性。

Answer 6

这两个选项都有加号和负号，但是并列说明内容是否需要索引/搜索。我个人会选择选项1，因为我相信架构会更容易制作。

创建HTML：PHP服务器端与jQuery客户端

6 个答案:

选项1，使用PHP：

选项2，使用jQuery：