用动态内容填充页面的最佳方式

我一直在想这个问题一段时间了，为了举例说明我们有index.php，它有一大堆内容和一个搜索框，当用户将数据输入到搜索框结果中，例如每个结果的图像和数据。用动态内容填充页面的最佳方式

填充这些结果的最佳方法是什么？

例一

AJAX邮政results.php其回声完整的结果，包括 HTML和审美的标签。然后回到第一页，包括使用.html（data）返回的所有数据，包括 ;

例二

有结果的骨架和隐藏它们，（包装 div的，并且包括对于每个结果一切）然后AJAX和检索数据和填充的div并向他们展示

或者您可能有其他建议吗？

来源

2012-09-06 user1527354

如果结构没有改变，最好使用JSON并填充到本地JavaScript中。

考虑有一套书。大约100.如果你要输出HTML进行更新，肯定会花费很多。虽然，你只输出东西一样：

{ 
    success:true, 
    rows:[{ 
     "id":"1", 
     "title":"Office Space", 
     "director":"Mike Judge", 
     "released":"1999-02-19", 
     "genre":"1", 
     "tagline":"Work Sucks", 
     "coverthumb":"84m.jpg", 
     "price":"19.95", 
     "available":"1" 
    },{ 
     "id":"3", 
     "title":"Super Troopers", 
     "director":"Jay Chandrasekhar", 
     "released":"2002-02-15", 
     "genre":"1", 
     "tagline":"Altered State Police", 
     "coverthumb":"42m.jpg", 
     "price":"14.95", 
     "available":"1" 
    },{ 
     "id":"4", 
     "title":"American Beauty", 
     "director":"Sam Mendes", 
     "released":"1999-10-01", 
     "genre":"2", 
     "tagline":"... Look Closer", 
     "coverthumb":"12m.jpg", 
     "price":"19.95", 
     "available":"1" 
    },{ 
     "id":"5", 
     "title":"The Big Lebowski", 
     "director":"Joel Coen", 
     "released":"1998-03-06", 
     "genre":"1", 
     "tagline":"The \"Dude\"", 
     "coverthumb":"49m.jpg", 
     "price":"21.90", 
     "available":"1" 
    },{ 
     "id":"6", 
     "title":"Fight Club", 
     "director":"David Fincher", 
     "released":"1999-10-15", 
     "genre":"3", 
     "tagline":"How much can you know about yourself...", 
     "coverthumb":"94m.jpg", 
     "price":"19.95", 
     "available":"1" 
    }] 
}

这可以通过jQuery.parseJSON得到很好的解析和table或内部li S或复杂div小号显示。

来源

2012-09-06 10:52:12

这实际上取决于您在当前页面结构和接收数据结构方面更容易。这两种方法都是完全正确的，尽管我可能会倾向于第一种方法，因为它更易于使用，并且可以将输出格式化为PHP文件（如果需要的话）...但唯一的区别基本上是数量由AJAX收到的数据以及今天的互联网速度，两个HTML标签以及内容并没有太大区别。

来源

2012-09-06 10:52:40 Shomz

用户输入搜索词。
执行AJAX GET到results.php。
以JSON格式从results.php返回数据。
用所述数据替换搜索结果。

来源

2012-09-06 10:52:48

第二个选项好得多恕我直言，使用JSON来获取数据，并且在您回顾它之后担心将其插入到客户端。这样想一想：你发送/接收的数据越少越好。下面是几个百分点

的代码是更易于维护，如果你只是路过JSON和你的观点有在日后改变。
代码为更具可读性为开发者，如果他们只是路过JSON，他们可以用更简单的数据修复问题，而无需翻阅大量布局HTML结构。

来源

2012-09-06 10:55:16

但是，如果我有说隐藏的，如果只有6个返回结果，我将有一大堆的空框架被20个所示的结果页面上，但骨架？ – user1527354

我假设你的骨架对于每个数据都是一样的，所以你应该只有一个，然后复制你从AJAX得到的许多结果 –

所以我有jQuery中的骨架？或者隐藏在页面上？ – user1527354

这两种都有可能，但与完整的HTML答案（选项1）在大多数情况下更好。如果你有一个动态的PHP页面，你应该使用模板引擎。

我通常与多个模板结束了：与页面结构，菜单模板，一个模板条主模板......在你的情况下，结果模板。

然后你就可以有或没有Ajax使你的搜索请求。如果启用了js，则只需使用“结果”模板呈现结果;返回html片段并将其插入到页面的apropiate点。

如果JS被禁用的。你申请一个新的网页，其中呈现在一个新的页面结果。

你可以使用一个JS模板引擎也一样，但到目前为止，我还没有发现它在PHP和JS一个体面的实现。

来源

2012-09-06 11:07:35

JSON是最好的选择，因为它发送的数据少得多。直接来自Jquery文档的示例显示您不需要为数据生成框架。正如你所看到的，你需要创建的唯一东西是一个容器来容纳从javascript创建的元素。 <img>标签根据需要创建并附加到指定的images div容器中。

<!DOCTYPE html> 
<html> 
<head> 
    <style>img{ height: 100px; float: left; }</style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div id="images"> 

</div> 
<script> 
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 
     { 
      tags: "mount rainier", 
      tagmode: "any", 
      format: "json" 
     }, 
     function(data) { 
      $.each(data.items, function(i,item){ 
       $("<img/>").attr("src", item.media.m).appendTo("#images"); 
       if (i == 3) return false; 
      }); 
     });</script> 

</body> 
</html>

来源

2012-09-06 11:12:43 Mike

我在设计上花了很多时间，每个结果都有多个标签，它不会只是一个图片标签，会不会是一个问题？ – user1527354

当然不是这是一个非常基本的例子。在stackoverflow上有很多例子几乎可以匹配你所需要的东西。 – Mike

这是在index.php

$('#search').live('click',function(){ 
    $.ajax({ 
    url: 'result.php', 
    data: {keyword: $('#search_box').val()}, 
    type: 'POST', 
    dataTupe: 'json', 
    success: function(response){ 
     $('.result_box').html(response['data']);  
    } 
    }); 
});

这是你result.php泔水看怎么样

$keyword = $_POST['keyword'];  
$result = getResults($keyword);  
die(json_encode(array('data'=>$result)));

getResults功能应该是你根据检索数据的关键词搜索。

希望这有助于。

来源

2012-09-06 11:22:43 Eralph

用动态内容填充页面的最佳方式

回答

相关问题