在同一页面上提交表格

Question

I have the following setup: https://jsfiddle.net/uosLke60/

 input.Add_To_Cart_Button { background-color: #000; color: #fff; border: none; font: inherit; cursor: pointer; font-size: 13px; margin-bottom: 40px; width: 120px; -webkit-appearance: none; border-radius: 0; }

 <div class="Product_Card_Button"> <form method="post" action="/cart/add"> <quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;"> <button class="quantity__button no-js-hidden" name="minus" type="button"> - </button> <input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;"> <button class="quantity__button no-js-hidden" name="plus" type="button">+</button> </quantity-input> <br> <input type="submit" value="Add to cart" class="Add_To_Cart_Button" /> </form> </div>

When the add to cart button is pressed, the page refreshes. How can I adjust it so that the product is added to cart without the page refresh? Any suggestions would be helpful. Thanks.

Answer 1

您应该使用 Ajax 来实现这一点，因此可以更新网页的某些部分，而无需重新加载整个页面。