如何在不刷新页面的情况下创建购物车以在其中添加多个项目

Question

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

Answer 1

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

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

所以你需要做的是：

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

以下是一些帮助您入门的参考资料。

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

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