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

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 并生成结帐页面（或基于您的业务逻辑的任何其他结果）