如何在不刷新页面的情况下创建购物车以在其中添加多个商品
如何在不刷新页面的情况下创建购物车以在其中添加多个商品
提问于 2019-01-04 01:54:56
我正在为一个CS50项目建立一个在线商店网站模型，我目前在创建购物车时遇到了麻烦。
我可以构建一个非常简单的购物车模型，在这个模型中，单击一下页面上所有的“购买”按钮，就可以将用户重定向到某个add_to_cart()函数。
我正在努力实现的是在每次点击时不重定向到另一个页面。例如，我见过网上商店在一个页面上有许多商品及其相应的“购买”按钮，单击按钮后，我只是看到购物车上的计数器元素增加了，用户可以继续在页面上购物，只有在完成购物后才能转到购物车页面完成购买。
我有一个模板代码块，我正在处理atm，试图解决所需的Python，可能还会有一些JS代码与之配套：
<form action="/catalog" method="post">
{% for item in goods %}
<li class="list-group-item list-item-no-leftpad">
<div class="item-info-description">
<p><a href="/item?id={{ item.item_id }}">{{ item.brand }} {{ item.model }}</a>
<p>{{ item.short_description }}
</div>
<div class="item-info-offers">
<p>Price: ${{ item.price }}
<p>In stock: {{ item.in_stock }}
<p><button type="submit" class="btn btn-primary" name="buy" value="{{ item.item_id }}">Buy</button>
</div>
</li>
{% endfor %}
</form>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-04 03:31:46
问题是，每次用户尝试更新项目时，浏览器都会向您的web服务器(或应用程序)发出POST请求。这涉及到POST-ing表单数据和重新生成整个页面，并向用户显示更新后的内容。这是在<form action="/catalog" method="post">中处理的
您正在寻找的是基于来自用户的交互来更新、存储和更新信息的客户端代码。经过试验和测试的方法是使用cookies (存储信息)和JavaScript (修改信息)。存储购物车信息(或者更确切地说是组织它)的最简单方法是使用JSON (最后只是一个字符串)并将其存储在cookie中。
所以你需要做的是：
- 不是每次用户尝试更新购物车时都更新购物车。为此；
- 在客户端代码中，为您显示的所有项目的按钮单击添加一个事件侦听器。
- 添加一个不同的按钮，用于
POST任何其他信息( cookie由浏览器自动发送) - 读取cookie服务器端并生成结帐页面(或基于您的业务逻辑的任何其他结果)
这里有一些参考资料可以帮助您入门。
更新：你可能想使用本地存储API，以便更好地符合GDPR.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54027403
复制相关文章
相似问题
腾讯云开发者
