1

我正在运行一个 PHP webapp，它允许用户查看项目列表。

基本站点使用 PHP 编写 HTML 来显示搜索结果：

<body>
   <?php
      foreach($results as $item) {
         echo "<div class='item'>".
                 "<img src='images/items/".$item['imageName'].".png' />".
                 "<span class='itemDescription'>".$item['text']."</span>".
              "</div>";
      }
    ?>
 </body>

但是，当启用 Javascript 时，我使用 AJAX 来显示结果：

function fireSearch(query) {
   $.post("ajax/search.php", {q: query}, function(items) {
      for (var i in items) {
         $("body").append(
             "<div class='item'>"+
                "<img src='images/items/"+items[i]['imageName']+".png' />"+
                "<span class='itemDescription'>"+items[i]['text']+"</span>"+
             "</div>";
      }
   }
}

我可以简单地编写一个名为的 PHP 函数get_item_html($item)并让 AJAX 请求返回干净的 HTML 并将其简单地放置在 DOM 中，但是如果请求返回大量结果，那么当我真正需要构建 HTML 时，这将是真正的带宽浪费是imageName和text。

这只是我必须应对的事情还是有一些优雅的解决方案？

这个问题有名字，所以我可以用谷歌搜索吗？

4

3 回答 3

1

好的，我知道了。

我找到的最佳解决方案是使用Mustache，编写一些模板并阅读 Javascript 和 PHP 中的模板。

Mustache库提供PHP和Javascript实现，所以不用担心：

  1. 创建一些.mustache模板
  2. 在 PHP 中，使用库提供的类和方法来创建 HTML 和echo它
  3. 在 Javascript 中，通过添加mustache.js脚本来使用模板，并为页面使用的每个模板添加一个脚本标签，其中包含模板文件的内容echo：
    <script id="arbitraryID" type="text/mustache">
    <?php echo file_get_contents(__DIR__."/templates/myTmpl.mustache"); ?>
    </script>
    然后可以通过以下方式使用模板（jQuery 样式）：
    var tmpl = $("#arbitraryID").html();

希望这可以帮助任何发现这个问题的人......

于 2013-02-19T00:17:31.703 回答
0

正如Bergi所说，使用模板封装信息的显示，在ajax请求中只发送imageName和text。

有很多方法可以实现模板（我听说过很多关于handlebars.js的好东西，还没有尝试过），一个简单的方法是用ajax请求上收到的数据编写html标记并将其附加到容器中，也许使用一个简单的函数，以后可以用适当的模板方法替换它。

function drawItem(item) {
    return "<div class='item'>" +
             "<img src='images/items/"+item.imageName+"' />" +
             "<span class='itemDescription'>"+item.text+"</span>" +
           "</div>";
}

function fireSearch(query) {
    $.post("ajax/search.php", {q: query}, function(items) {
        for (var i=0; i<items.length; i++) {
            $("body").append(drawItem(items[i]);
        }
    }, 'json');
}

ajax/search.php 会返回类似： [{"imageName":"blabla.png","text":"moomoo"},...]

由这样的 search.php 文件生成：

<?php 
echo json_encode(array(
    array("imageName"=>"blabla.png", "text"=>"moomoo"),
    array("imageName"=>"example2.png", "text"=>"second example")
));

?>
于 2013-02-18T11:38:08.847 回答
0

我会让 ajax 函数返回一个 json 构建，然后我会将你的 .append() 变成一个自定义的最小化函数以减小大小，这样你就会有很多更清晰的代码。

于 2013-02-18T11:12:56.450 回答