创建购物清单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。