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

标签 javascript jquery python django

我正在通过尝试构建一个简单的购物 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/

相关文章:

javascript - Angular 在 ng-src 中对 url 进行编码,并将 '/' 替换为 %2F,将 '?' 替换为 %3F

jQuery:加载和使用大型 XML 文件的最快方式

python - 如何计算 Pandas df 中具有特定列名称的项目数? (Python)

javascript - 获取cshtml中表单的按钮id

javascript - 如何在jquery中将文本设置为td

Python列表实现

python - Flask 每个蓝图错误页面

javascript - 仅从 Express 静态目录提供 .js 文件?

javascript - 如何在spine.js中重新绑定(bind) Controller ?

javascript - AngularJs 1.3 $resource 忽略一些字符