时间戳

首页 > 解决方案 > 如何创建购物车以在其中添加多个商品而不刷新页面

javascript - 如何创建购物车以在其中添加多个商品而不刷新页面

问题描述

我正在为一个 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>

标签： javascriptpythonhtml

解决方案

问题是每次用户尝试更新项目时，浏览器都会POST向您的 Web 服务器（或应用程序）发出请求。这涉及POST到表单数据和重新生成整个页面并向用户显示更新的内容。这是在处理<form action="/catalog" method="post">

您正在寻找的是客户端代码，用于根据用户的交互更新商店和更新信息。久经考验的方法是使用cookies（存储信息）和JavaScript（修改它）。存储购物车信息（或者更确切地说是组织它）的最简单方法是使用JSON（最后只是一个字符串）并将其存储在 cookie 中。

所以你需要做的是：

  1. 不要POST每次用户尝试更新购物车时。要做到这一点;
  2. 在您的客户端代码中，为您显示的所有项目的按钮单击添加一个事件侦听器。
  3. 添加一个不同的按钮，即POST任何附加信息（Cookie 由浏览器自动发送）
  4. 读取 cookie 服务器端并生成结帐页面（或基于您的业务逻辑的任何其他结果）

这里有一些参考资料可以帮助您入门。

更新：您可能想改用本地存储 API，以更好地遵守 GDPR。

JS - Cookie
JS - 对按钮点击做出反应
JS - 获取被点击的对象

推荐阅读