創建購物清單web應用程序

Question

我正在學習Python，Django，Javascript和jQuery，試圖構建一個簡單的購物清單web應用程序。如果我的方法正確，我希望聽到有經驗的開發人員的意見：

功能： 網頁將顯示食物列表。當我點擊某種食物時，我想要顯示一份食材清單（這將是我的購物清單）。點擊另一種食物將增加更多的成分到購物清單。

我的方法： 我用django構建了一個簡單的頁面。我可以顯示已輸入數據庫的所有食物的列表。我現在需要的是在點擊食物時開始製作食材清單。

我想我會加載第一頁加載數據庫中的成分列表，但用css隱藏它們。當我點擊食物項目時，我會通過使用jquery/css來取消與食物相關的成分。

這種方法對我來說似乎很笨拙。你能否給我一些建議，我可以如何使用上述技術創建我的購物清單應用程序？我的方法是否正確？

Answer 1

這是我該怎麼做的。但請注意，這個問題不會有對的回答。

讓我們打電話給您點擊食物的頁面，index.php。

在index上，我可以點擊所有可以點擊的食物，以及帶有「成分」標識的空白div - 例如。 <div id="ingredients"></div>

點擊食物時，他們會調用main.js中的jQuery處理程序。

的onclick處理程序將：

• 保持當前選擇的食物的軌道
• 通過AJAX發送JSON或其它格式的名單到get_ingredients.php頁面。
• （此頁面將返回我想在「Ingedients」部分中顯示的HTML）
• 使用由AJAX調用返回的html設置成分div的內容。

更明確地說，get_ingredients.php會：

• 解析的，是由index
• 查詢數據庫發送（通過AJAX）的食物，看看有什麼成分，是必要的選擇了GET/POST列表食物
• 構建HTML應該被放入面向用戶頁面上「ingredients」div的查詢結果。
• 「顯示它」通過echo/print/printf/etc，這不是真的與AJAX顯示，而是作爲AJAX響應發送。

這樣，你只需要跟蹤選定的食物，而不是在選擇和取消選擇食物時處理添加/減少單個配料量。

這有缺點重新傳遞的東西「你已經知道」，即以前選擇的食品成分，但它消除了許多本來需要的工作。

Answer 2

@jedwards的評論是正確的。而不是加載一切爲每項目在開始（這可能會導致初始頁面加載緩慢）。你應該在jquery中做一個點擊事件，ajax會回調服務器，並在你的數據庫中傳遞對象的名稱或ID並返回它的成分，然後填充包含它們的成分的div。