jquery - 将商品添加到购物车 jquery 功能

Question

我的 php 最后通过 echo 创建每个产品是

<form name="addToCartForm">
<input type="hidden" id="inputid" value="'.$id.'"/>
<input type="submit" id="submitbutton" value="Add to cart"/>
</form>

网站上通常动态创建10个产品

因此，对于 php 显示的每个产品，我有 10 个具有相同类或 ID 的按钮

关于通过post(jquery)将数据发送到cart.php文件而不刷新网站的功能的任何想法。
我必须在 $_POST 中发送正确的产品 ID，以便 cart.php 知道添加了什么。

为什么当我添加

$(document).ready(function(e) {
    $('#submitbutton').click(function(e) {
        var pos = $('#inputid').val();
        alert(pos);
        return false;
    });
});

它正在努力提醒第一个按钮添加到购物车并非全部

我是 jquery 的新手:) 请帮忙

Answer 1

听起来您正在寻找 AJAX 功能。幸运的是，jQuery 有一个用于 AJAX 调用的函数，描述于 http://api.jquery.com/jQuery.ajax/ .

然后你可以写一些代码如下:

$(document).ready(function() {
    $('#submitbutton').click(function() {
        var pos = $('#inputid').val();
        $.ajax({
            url: "cart.php",
            type: "POST",
            data: {itemID: pos},
            success: function(data) {
                // Do stuff when the AJAX call returns
            }
        });
    });
});

然而，这有一个缺陷。如果您要在同一页面上有多个提交按钮，则不能对所有按钮使用相同的 ID。最好为所有字段指定一个类，如下所示:

<form name="addToCartForm">
    <input type="hidden" class="inputid" value="'.$id.'"/>
    <input type="submit" class="submitbutton" value="Add to cart"/>
 </form>

您最终的 Javascript 代码将如下所示:

$(document).ready(function() {
    $('.submitbutton').click(function() {
        var pos = $(this).parent().find('.inputid').val();
        $.ajax({
            url: "cart.php",
            type: "POST",
            data: {itemID: pos},
            success: function(data) {
                // Do stuff when the AJAX call returns
            }
        });
    });
});