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

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等。

其次，将事件侦听器简单地附加到您的元素上，而不是尝试在函数中包含函数，这样会更清洁。 我的代码比必须的要冗长一些，但是试图使其易于遵循。

第三，不要在URL中使用句点来进行AJAX调用，这很可能会使您的请求失败。 Web浏览器中的URL只是使用/引用根目录（即/apples.php与example.com/apples.php相同），或者不使用任何内容来引用您当前的目录（例如，当在example.com/fruits时是apples向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,
    });
}