如何在不刷新頁面的情況下創建購物車以在其中添加多個項目

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 - 獲取被點擊的對象