删除购物车ajax js,jQuery Ajax从购物车中删除特定商品

我有购物车。我的车中有消除对每个项目的按钮如下:jQuery Ajax从购物车中删除特定商品

....

Music CD23£51.89DVD5£12.23

....

和jQuery

jQuery('.remove').submit(function(data) {

// Validate & remove item from cart stuff

return false;

});

我的作品的形式张贴的形式,但我希望它ajaxify。

如何告诉jQuery哪个pid从篮子中删除?

如何修改html & js以便我的jQuery脚本知道从篮子中删除哪个特定产品(pid)?

为了清楚起见...您会看到在这个例子中有两种形式。如果购物车中有更多商品,将会有更多的表单......所以如何才能告诉jQuery当表单之间的唯一区别是pid时,哪个表单被提交?

2013-01-03

Gravy

+0

如果没有看到您要提交的文件,将很难有人彻底回答这个问题。你在使用什么样的购物车软件?并在哪个平台上? –

+0

谢谢你的回应。但我不同意。这与我提交的内容无关。我想要做的就是告诉jQuery哪个pid从购物车中删除。我可以做其余的事情。谢谢 –

+0

我的看法:处理事件'click'为“删除”按钮,而不是表单的'submit'事件。现在你在哪里保存物品? –

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的购物车网页示例,使用了jQueryAjax技术: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>购物车</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1>购物车</h1> <div> <h2>商品列表</h2> <ul> <li data-id="1"> 商品1 <button class="add-to-cart">加入购物车</button> </li> <li data-id="2"> 商品2 <button class="add-to-cart">加入购物车</button> </li> <li data-id="3"> 商品3 <button class="add-to-cart">加入购物车</button> </li> </ul> </div> <div> <h2>购物车</h2> <ul id="cart-items"> </ul> <p>总价:<span id="total-price">0</span>元</p> </div> <script src="script.js"></script> </body> </html> ``` JavaScript代码: ``` // 点击加入购物车按钮时,将商品信息添加到购物车 $('.add-to-cart').click(function() { const itemId = $(this).parent().data('id'); $.ajax({ url: 'add-to-cart.php', method: 'POST', data: {id: itemId}, success: function(response) { // 更新购物车列表和总价 updateCart(JSON.parse(response)); } }); }); // 更新购物车列表和总价 function updateCart(cartData) { $('#cart-items').empty(); let totalPrice = 0; for (const item of cartData) { $('#cart-items').append(`<li>${item.name} x ${item.quantity},单价${item.price}元</li>`); totalPrice += item.price * item.quantity; } $('#total-price').text(totalPrice); } ``` PHP代码(add-to-cart.php): ``` <?php session_start(); // 如果购物车为空,创建一个空的购物车数组 if (!isset($_SESSION['cart'])) { $_SESSION['cart'] = array(); } // 将商品添加到购物车 $cart = $_SESSION['cart']; $itemId = $_POST['id']; if (isset($cart[$itemId])) { $cart[$itemId]['quantity']++; } else { $cart[$itemId] = array( 'name' => "商品{$itemId}", 'price' => rand(10, 100), 'quantity' => 1 ); } $_SESSION['cart'] = $cart; // 返回购物车信息 echo json_encode(array_values($cart)); ``` 在这个示例,点击“加入购物车”按钮时,会通过Ajax技术将商品ID发送到服务器,服务器会将商品添加到购物车,并返回购物车所有商品的信息。然后使用jQuery更新购物车列表和总价。购物车信息存储在Session

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值