创建购物清单Web应用程序

Question

我正在通过尝试构建一个简单的购物清单Web应用程序来学习Python，Django，Javascript和jQuery。如果我的方法是正确的，我想听听有经验的开发人员的意见：

功能 网页将显示食物清单。当我点击某种食物时，我想要一个显示的成分列表（这将是我的购物清单）。点击另一种食物会在购物清单中添加更多食材。

我的方法： 我用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设置components div的内容。

更明确地说，get_ingredients.php会：

• 解析index
发送的食物的GET / POST清单（通过AJAX）
• 查询数据库以查看所选食物所需的成分
• 构造与查询结果相对应的HTML，该查询结果应放在面向用户页面的“ingredients”div中。
• 通过echo / print / printf /等“显示”，这不是用AJAX真正显示的，而是作为AJAX响应发送的。

这样，您只需跟踪所选食物，而不是在选择和取消选择食物时添加/减去单个成分数量。

这有重新传递“你已经知道”的东西的缺点，即先前选择的食物成分，但它消除了许多本来需要的工作。

Answer 2

@jedwards'评论是正确的。而不是在开头为每个项加载所有（这可能会导致初始页面加载缓慢）。您应该在jquery中执行一个点击事件，该事件会对ajax回调服务器并传递数据库中对象的名称或ID并返回其成分，然后填充div含有它们的成分。