用動態內容填充頁面的最佳方式

我一直在想這個問題一段時間了，爲了舉例說明我們有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

用動態內容填充頁面的最佳方式

回答

相關問題