1

我一直在考虑这个问题，举个例子，假设我们有 index.php，它有一大堆内容和一个搜索框，当用户将数据输入搜索框时，结果如下所示每个结果的图像和数据。

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

示例一

AJAX 发布到 results.php，它与包括 HTML 和美学标签在内的完整结果相呼应。然后回到第一页，包括使用 .html(data); 返回的所有数据；

示例二

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

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

4

7 回答 7

1

这是在 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-06T11:22:43.603 回答
1
  1. 用户输入搜索词。
  2. 对 results.php 执行 AJAX GET。
  3. 从 results.php 以 JSON 格式返回数据。
  4. 用所述数据替换搜索结果。
于 2012-09-06T10:52:48.493 回答
0

JSON 是最好的选择，因为它发送的数据要少得多。直接来自 Jquery 文档的示例表明您不需要为数据生成骨架。如您所见，您唯一需要创建的是一个容器来保存从 javascript 创建的元素。<img>标签根据需要创建并附加到指定的imagesdiv 容器中。

<!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-06T11:12:43.550 回答
0

如果结构没有改变，最好使用 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 解析并显示为tableor insideli或 complex div。

于 2012-09-06T10:52:12.880 回答
0

这实际上取决于当前页面结构和接收数据的结构对您来说更容易。两种方法都很好，尽管我可能会倾向于第一种，因为它更容易使用，并且您可以在 PHP 文件中格式化输出（以防万一）......但唯一的区别基本上是数量AJAX 接收的数据和当今的互联网速度，几个 HTML 标签以及内容不会有太大的不同。

于 2012-09-06T10:52:40.270 回答
0

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

我通常以多个模板结束：一个带有页面结构的主模板、一个菜单模板、一个文章模板……在你的情况下是结果模板。

然后，您可以使用或不使用 ajax 来提出搜索请求。如果启用了 js，您只需使用“结果”模板呈现结果；返回 html 片段并将其插入页面的适当点。

如果 js 被禁用，则您请求一个新页面，该页面将结果呈现在一个新页面中。

您也可以使用 js 模板引擎，但到目前为止，我还没有发现在 PHP 和 js 中有一个不错的实现。

于 2012-09-06T11:07:35.313 回答
0

恕我直言，第二个选项要好得多，使用 JSON 来获取数据，并担心在检索后将其插入客户端。这样想：您发送/接收的数据越少越好。这里有几点

  • 如果您只是传递 JSON，则代码更易于维护，并且您的视图必须在以后更改。
  • 如果只是传递 JSON，则代码对开发人员来说更具可读性，他们可以更轻松地解决数据问题，而无需经历大量布局 HTML 结构。
于 2012-09-06T10:55:16.773 回答