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

Question

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

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

1. 在服务器端使用PHP创建HTML代码,以HTML格式将其发送到客户端.然后用户使用Javascript(jQuery,本质上)操作表.

2. 使用JSON将原始数据发送到客户端,然后使用jQuery创建HTML,然后由用户对其进行操作.

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

Answer 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方法.