0

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

功能: 网页将显示食物列表。当我点击某种食物时,我希望显示一份配料清单(这将是我的购物清单)。单击另一种食物将向购物清单添加更多成分。

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

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

这种方法对我来说似乎很笨拙。您能否给我一些建议,如何使用上述技术创建我的购物清单应用程序?我的方法正确吗?

4

2 回答 2

3

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

让我们调用您单击食物的页面,index.php

在 上index,我将拥有所有可以点击的食物,以及一个 ID 为“ingredients”的空 div——例如。<div id="ingredients"></div>

当点击食物时,他们会在main.js.

onClick 处理程序将:

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

更明确地说,get_ingredients.php将:

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

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

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

于 2012-06-16T18:14:25.453 回答
0

@jedwards 的评论是正确的。而不是在开始时为每个项目加载所有内容(这可能导致初始页面加载缓慢)。您应该执行一个单击事件,该事件会回调服务器并传递数据库中对象的名称或 id 并返回其成分,然后填充包含这些成分的 div。jqueryajax

于 2012-06-16T18:11:05.390 回答