Question

我一直在考虑这个问题已经有一段时间了，为了一个例子，我们假设我们有index.php，它有一大堆内容和一个搜索框，当用户将数据输入搜索框时会出现结果以下是每个结果的图像和数据。

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

示例一

AJAX发布到results.php，其中包括完整的结果 HTML和美学标签。然后回到第一页包含使用.html（数据）返回的所有数据;

示例二

拥有结果的骨架并隐藏它们，（包装器 div和每个结果包含的所有内容）然后是AJAX并检索数据并填充div并显示它们

或者您可能有任何其他建议？

Answer 1

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

Answer 2

这是在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 swill看起来像

的样子

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

getResults函数应该是您根据关键字搜索检索数据的位置。

希望这会有所帮助。

Answer 3

如果结构没有改变，最好使用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内。

Answer 4

这实际上取决于当前页面结构和接收数据结构对您来说更容易。这两种方法都很好，虽然我可能会倾向于第一个，因为它更容易使用，你可以格式化PHP文件中的输出（如果你需要）...但唯一的区别基本上是金额通过AJAX收到的数据以及当今的互联网速度，一些HTML标签以及内容不会产生太大的影响。

Answer 5

第二个选项是更好的恕我直言，使用JSON来获取数据，并担心在您重新启动后将其插入客户端。以这种方式思考：您发送/接收的数据越少越好。这里有几点

代码更易于维护，如果您只是传递JSON，并且您的观点必须在以后更改。
对于开发人员而言，如果他们只是传递JSON，则代码更具可读性，他们可以更轻松地解决数据问题，而无需经过大量的布局HTML结构。

Answer 6

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

我通常最终会得到多个模板：一个带有页面结构的主模板，一个菜单模板，一个文章模板......以及您的结果模板。

然后您可以使用或不使用ajax进行搜索请求。如果启用了js，则只需使用“result”模板渲染结果;返回html片段并将其插入页面的apropiate点。

如果js是diasbled，您需要一个新页面，将结果呈现在一个新的页面中。

你也可以使用js模板引擎，但到目前为止，我找不到任何在PHP和js中都有不错的实现。

Answer 7

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>

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

7 个答案: