Javascript 创建购物清单web应用程序_Javascript_Jquery_Python_Django

Javascript 创建购物清单web应用程序

javascript jquery python django

Javascript 创建购物清单web应用程序,javascript,jquery,python,django,Javascript,Jquery,Python,Django,通过尝试构建一个简单的购物清单web应用程序，我正在学习Python、Django、Javascript和jQuery。如果我的方法正确，我希望听取经验丰富的开发人员的意见：功能：网页将显示食物列表。当我点击某一食物时，我想显示一个配料列表（这将是我的购物列表）。点击另一种食物会在购物清单中添加更多的配料我的方法：我用django构建了一个简单的页面。我可以显示所有已输入数据库的食物的列表。我现在需要的是在我点击食物时开始建立一个配料列表我想我会在加载第一页时从数据库中加载一个成分列表

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

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

我的方法： 我用django构建了一个简单的页面。我可以显示所有已输入数据库的食物的列表。我现在需要的是在我点击食物时开始建立一个配料列表

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

这种方法在我看来相当笨拙。你能给我一些建议，如何使用上面提到的技术创建我的购物清单应用程序吗？我的方法正确吗？

@jedwards的评论是正确的。而不是在开始时加载每个项目的所有内容（这可能会导致初始页面加载缓慢）。您应该在

jquery

中执行一个点击事件，该事件将

ajax

回调到服务器，并在数据库中传递对象的名称或id并返回其成分，然后填充包含成分的div。

@jedwards的注释是正确的。而不是在开始时加载每个项目的所有内容（这可能会导致初始页面加载缓慢）。您应该在

jquery

中执行一个点击事件，该事件将

ajax

回调到服务器，并在数据库中传递对象的名称或id，并返回其成分，然后填充包含成分的div。

我将这样做。但请注意，这个问题没有正确的答案

让我们调用您单击食品的页面，

index.php

在

索引

上，我会有所有可以点击的食物，还有一个id为“配料”的空div——例如

当点击食物时，他们会在

main.js

中调用jQuery处理程序

onClick处理程序将：

跟踪当前选择的食物
通过AJAX将json或其他格式的列表发送到
```
get_components.php
```
页面
（此页面将返回我希望在“Ingedients”部分显示的HTML）
使用AJAX调用返回的html设置配料div的内容

更明确地说，

get_components.php

将：

解析通过
```
index
```
查询数据库，查看所选食物需要哪些成分
构造与查询结果相对应的HTML，这些查询结果应放在面向用户的页面上的“配料”div中
通过
```
echo
```
/
```
print
```
/
```
printf
```
/etc“显示”，这并不是用AJAX真正显示的，而是作为AJAX响应发送的

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

这有一个缺点，那就是重新传递“你已经知道”的东西，即先前选择的食物成分，但是它省去了很多本来需要做的工作。

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