我正在为 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>
问题是,每次用户尝试更新项目时,浏览器都会向您的 Web 服务器(或应用程序)发出
POST
请求。这涉及对表单数据进行POST
处理并重新生成整个页面并向用户显示更新的内容。这是在 <form action="/catalog" method="post">
中处理的
您正在寻找的是客户端代码,用于根据用户的交互来更新商店和更新信息。久经考验的方法是使用cookie(存储信息)和JavaScript(修改信息)。存储购物车信息(或者更确切地说组织它)的最简单方法是使用 JSON (最后只是一个字符串)并将其存储在 cookie 中。
所以你需要做的是:
POST
。为此;POST
是任何附加信息(Cookie 由浏览器自动发送)