實現加載和渲染異步

Question

列表，我要實現我的網站列表，該行爲如下：

在首頁，列表呈現，只顯示第一12個項目，然後一個「加載更多...」按鈕。

2.的完成頁面加載後立刻在未來12個數據應該是預加載。

當點擊「加載更多」加載12 呈現，右後，下一個是預加載，等等一次又一次......

我的應用程序是使用node.js，express.js，jQuery，ejs和bootstrap。

現在，我的服務器邏輯生成數據列表成功，然後我用EJS模板來渲染整個大名單。

我很困惑如何更改爲使用AJAX的動態列表。

將「第一渲染」還是應該使用EJS從服務器來完成，然後所有的列表項將再次使用EJS呈現增加，但是從客戶端這個時間呢？什麼是最好的/簡單的方式來暗示我需要的行爲？順便說一句 - 每個列表項目，包括一個img標籤，直接到一個獨特的圖像 - 使用JSON時不是一個問題...？

任何幫助，或者有幫助的例子鏈接 - 將會非常讚賞。謝謝。

Answer 1

你有兩個選擇您的AJAX調用，據我可以告訴。一種是將JSON返回給瀏覽器，並使用客戶端模板庫來呈現數據。另一種選擇是僅渲染服務器上的列表，然後將HTML返回給瀏覽器，然後直接插入到DOM中。

您將需要建立在明確了不同的路線，以便它只返回無論是JSON或列表項的HTML，而不是從第一次加載整個HTML文檔。

返回HTML瀏覽器的好處是，你不需要加載瀏覽器上的模板引擎或有模板的邏輯在瀏覽器中，並且降低了代碼的大小，並保持樣樣都乾的服務器兩者。但是，如果您需要將數據存儲在瀏覽器內存中以執行其他操作，那麼JSON是您最好的選擇。

我很高興在任何您需要的地方展開以使事情更清晰。