小编典典

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

ajax

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

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

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

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

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


阅读 256

收藏
2020-07-26

共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方法。

2020-07-26