Question

每当我点击<a>元素时，就会出现Uncaught SyntaxError: Unexpected identifier错误。

我一直在考虑它，我怀疑它可能与变量是一个对象有关，但我还没有设法解决它。

这是前端代码：

for (var i = 0; i < Object.keys(data).length; i++) {
                $("#allprod").append("<a href='#' onclick='AddToCart(" + data[i] + ")' class='button expanded success'>Add to cart</a>");
            }

这是后端AJAX代码：

function AddToCart(data) {
    $.ajax({
        url: "./php/cart_add.php",
        data: {
            id: data.id,
            img: data.img,
            name: data.name
        },
        type: "POST"
    });
}

Answer 1

您使用Object.keys循环访问对象，但是您无法使用data[i]访问该对象，它应该是data[Object.keys(data)[i]] - 更好的是将键分配给变量以清除它一点点。

var keys = Object.keys(data);

for (var i = 0; i < keys.length; i++) {
  // access with data[keys[i]]
}

Answer 2

您的代码存在一些问题。

首先，您试图像对待数组一样遍历对象的键。虽然你有点走上正轨但是你不能简单地将数字索引传递给你的对象，除非你的密钥实际上是0, 1, ..., n等。

其次，简单地将事件侦听器附加到元素而不是尝试将函数包含在行中会更加清晰。我的代码比它必须更冗长，但试图让它易于理解。

第三，不要在您的AJAX调用的URL中使用句点，它可能会使您的请求失败。 Web浏览器中的URL只使用/来引用根目录（即/apples.php与example.com/apples.php相同）或者不使用任何内容来引用您当前的目录（即apples时在example.com/fruits上会向example.com/fruits/apples发送请求。

将代码的第一部分更改为：

Object.keys(data).forEach(function(key) {
    $('#allprod').append(
        $('<a href="#" class="button expanded success">Add to cart</a>')
            .click(function() {
                AddToCart(data[key]);
            })
    );
});

对于您的AddToCart功能，请稍微调整一下：

function AddToCart(data) {
    $.ajax({
        type: 'POST',
        url: '/php/cart_add.php',
        data: data,
    });
}

为什么这个Object变量没有正确传递给函数？

2 个答案: