javascript - 创建购物 list Web 应用程序

Question

我正在通过尝试构建一个简单的购物 list Web 应用程序来学习 Python、Django、Javascript 和 jQuery。我想听听经验丰富的开发人员的意见我的方法是否正确:

功能:网页将显示食物列表。当我点击某种食物时，我希望显示成分列表(这将是我的购物 list )。点击另一种食物会将更多食材添加到购物 list 中。

我的方法:我用 django 构建了一个简单的页面。我能够显示已输入数据库的所有食物的列表。我现在需要的是在点击食品时开始构建成分列表。

我想我会在第一页加载时从数据库加载成分列表，但用CSS隐藏它们。当我点击某个食品时，我会使用 jquery/css 取消隐藏与该食品相关的成分。

这种方法对我来说似乎相当笨拙。您能给我一些如何使用上述技术创建购物 list 应用程序的建议吗？我的方法正确吗？

Answer 1

这就是我的做法。但请注意，这个问题没有正确答案。

让我们调用您点击食物的页面，index.php .

关于index ，我有所有可以点击的食物，以及一个带有 id“成分”的空 div - 例如。 <div id="ingredients"></div>

当点击食物时，它们会调用 main.js 中的 jQuery 处理程序。 。

onClick 处理程序将:

• 跟踪当前选择的食物
• 将 json 或其他格式的列表发送到 get_ingredients.php通过 AJAX 访问页面。
• (此页面将返回我想要在“成分”部分中显示的 HTML)
• 使用 AJAX 调用返回的 html 设置配料 div 的内容。

更明确地说，get_ingredients.php会:

• 解析 index 发送(通过 AJAX)的食物的 GET/POST 列表
• 查询数据库以了解所选食品所需的成分
• 构造与查询结果相对应的 HTML，并将其放入面向用户的页面上的“ingredients”div 中。
• 通过echo“显示它”/print/printf/etc，这并不是真正通过 AJAX 显示，而是作为 AJAX 响应发送。

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

这有一个缺点，就是重新传输“你已经知道”的东西，即之前选择的食物成分，但它消除了许多原本需要的工作。