blocks|key|2341710|text|问题是，每次用户尝试更新项目时，浏览器都会向您的web服务器(或应用程序)发出POST请求。这涉及到POST-ing表单数据和重新生成整个页面，并向用户显示更新后的内容。这是在<form+action="/catalog"+method="post">中处理的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2341711|您正在寻找的是基于来自用户的交互来更新、存储和更新信息的客户端代码。经过试验和测试的方法是使用cookies+(存储信息)和JavaScript+(修改信息)。存储购物车信息(或者更确切地说是组织它)的最简单方法是使用JSON+(最后只是一个字符串)并将其存储在cookie中。|2341712|所以你需要做的是：|2341713|2341714|不是每次用户尝试更新购物车时都更新购物车。为此；|ordered-list-item|2341715|在客户端代码中，为您显示的所有项目的按钮单击添加一个事件侦听器。|2341716|添加一个不同的按钮，用于POST任何其他信息(+cookie由浏览器自动发送)|2341717|读取cookie服务器端并生成结帐页面(或基于您的业务逻辑的任何其他结果)|2341718|2341719|这里有一些参考资料可以帮助您入门。|2341720|更新：你可能想使用本地存储API，以便更好地符合GDPR.|BOLD|2341721|JS+-+Cookies|2341722|JS+-+React+to+button+clicks|2341723|JS+-+Get+clicked+object|2341724|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON|1|https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies|2|https://www.w3schools.com/js/js_htmldom_eventlistener.asp|3|https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button^0|13|4|1E|4|2G|12|0|31|4|0|0|0|0|0|0|C|4|0|0|0|0|0|3|0|0|C|1|0|0|R|2|0|0|N|3|0^^$0|@$1|2|3|4|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|H|3|I|5|6|7|1U|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1W|8|@]|D|@]|E|$]]|$1|N|3|O|5|M|7|1X|8|@]|D|@]|E|$]]|$1|P|3|Q|5|M|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|R|3|S|5|M|7|21|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|22|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|23|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|24|8|@$9|25|A|26|B|Y]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|27|8|@]|D|@$9|28|A|29|1|2A]]|E|$]]|$1|11|3|12|5|6|7|2B|8|@]|D|@$9|2C|A|2D|1|2E]]|E|$]]|$1|13|3|14|5|6|7|2F|8|@]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|15|3|-4|5|6|7|2J|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]|1D|$5|18|19|1A|E|$1B|1E]]|1F|$5|18|19|1A|E|$1B|1G]]|1H|$5|18|19|1A|E|$1B|1I]]]]

The issue is that every time a user tries to update the item, the browser is making a <code>POST</code> request to your web server (or application). This involves <code>POST</code>-ing the form data and re-generating the whole page and displaying the updated contents to the user. This is handled in the <code>&lt;form action="/catalog" method="post"&gt;</code> 

What you are looking for is Client side code to update store and update information based on interaction from the user. The tried and tested method is to use cookies (to store information) and JavaScript (to modify it). The simplest way to store the cart info (or rather organize it) is by to use <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON" rel="nofollow noreferrer">JSON</a> (which is just a string in the end) and store it in the cookie. 

So what you need to do is:

<ol>
<li>Do not <code>POST</code> every time a user tries to update the cart. To do that;</li>
<li>In your client-side code, add an event listener for the button click for all the items that you display.</li>
<li>Add a different button that <code>POST</code>'s any additional info (Cookies are sent automatically by the browser) </li>
<li>Read the cookie server-side and generate a checkout page (or any other result based on your business logic)</li>
</ol>

Here are a few references to get you started. 

UPDATE: You might want to use local storage API instead, in order to better comply with GDPR. 

<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies" rel="nofollow noreferrer">JS - Cookies</a> 
<a href="https://www.w3schools.com/js/js_htmldom_eventlistener.asp" rel="nofollow noreferrer">JS - React to button clicks</a> 
<a href="https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button">JS - Get clicked object</a>

I am building an online shop website model for a CS50 project and I am currently having a trouble with creating a shopping cart.

I can build a very simple model of a cart where I'd redirect a user to some add_to_cart() function on a button click for all the "Buy" buttons on the page.

What I am trying to achieve is to do it without redirecting to another page on every click. For example, I've seen online shops with many items and their according "Buy" buttons on a page, and on a button click I simply see a counter on Cart element increasing, and a user can continue shopping on the page and only go to the Cart page to finalize the purchase when they are done.

I have this block of a template code that I am working with atm trying to solve the required Python, and probably some JS code to go with it:

<pre><code>&lt;form action="/catalog" method="post"&gt;
{% for item in goods %}
 &lt;li class="list-group-item list-item-no-leftpad"&gt;
 &lt;div class="item-info-description"&gt;
 &lt;p&gt;&lt;a href="/item?id={{ item.item_id }}"&gt;{{ item.brand }} {{ item.model }}&lt;/a&gt;
 &lt;p&gt;{{ item.short_description }}
 &lt;/div&gt;
 &lt;div class="item-info-offers"&gt;
 &lt;p&gt;Price: ${{ item.price }}
 &lt;p&gt;In stock: {{ item.in_stock }}
 &lt;p&gt;&lt;button type="submit" class="btn btn-primary" name="buy" value="{{ item.item_id }}"&gt;Buy&lt;/button&gt; 
 &lt;/div&gt;
 &lt;/li&gt;
{% endfor %}
&lt;/form&gt;
</code></pre>

How to create a shopping cart to add multiple items in it without page refresh

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在为一个CS50项目建立一个在线商店网站模型，我目前在创建购物车时遇到了麻烦。我可以构建一个非常简单的购物车模型，在这个模型中，单击一下页面上所有的“购买”按钮，就可以将用户重定向到某个add_to_cart()函数。我正在努力实现的是在每次点击时不重定向到另一个页面。例如，我见过网上商店在一个页面上有许多商品及其...

如何在不刷新页面的情况下创建购物车以在其中添加多个商品-腾讯云开发者社区-腾讯云

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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