我正在通过尝试构建一个简单的购物 list Web 应用程序来学习 Python、Django、Javascript 和 jQuery。我想听听经验丰富的开发人员的意见我的方法是否正确:
功能: 网页将显示食物列表。当我点击某种食物时,我希望显示成分列表(这将是我的购物 list )。点击另一种食物会将更多食材添加到购物 list 中。
我的方法: 我用 django 构建了一个简单的页面。我能够显示已输入数据库的所有食物的列表。我现在需要的是在点击食品时开始构建成分列表。
我想我会在第一页加载时从数据库加载成分列表,但用CSS隐藏它们。当我点击某个食品时,我会使用 jquery/css 取消隐藏与该食品相关的成分。
这种方法对我来说似乎相当笨拙。您能给我一些如何使用上述技术创建购物 list 应用程序的建议吗?我的方法正确吗?
最佳答案
这就是我的做法。但请注意,这个问题没有正确答案。
让我们调用您点击食物的页面,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 响应发送。
这样,您只需跟踪所选的食物,而无需在选择和取消选择食物时添加/减去单个成分的数量。
这有一个缺点,就是重新传输“你已经知道”的东西,即之前选择的食物成分,但它消除了许多原本需要的工作。
关于javascript - 创建购物 list Web 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11065828/