为什么HTML中的数据未定义？

Question

我有如下代码，它在html中显示并更新数据，但是数据在这里没有被定义：

data: {
    id: clickedBox.data('id'),
    nome: clickedBox.data('nome'),
    email: clickedBox.data('email')
}

完整代码如下：

$.ajax({
    type: 'GET',
    //async: false,
    url: 'https://app.myurl.com/reservas',
    success:function(reservas){

        reservas.forEach (function (reserva) {
            var reservasHTML = [];


            reservasHTML.push('<tr class="reservas">');
            reservasHTML.push('<td> <input type="checkbox" class="salvar" data-id="' + reserva._id + '" data-nome="' + reserva.nome + '" data-email="' + reserva.email + '"/> </td>');
            reservasHTML.push('<td>' + reserva._id + '</td>');
            reservasHTML.push('<td>' + reserva.nome + '</td>');
            reservasHTML.push('<td>' + reserva.email + '</td>');
            reservasHTML.push('</tr>');

            $('tbody').append(reservas.join(""));

        })
    },
    error:function(e){
        console.log(e);
    }
});


$(function(){
    $('body').on('click', '.salvar', function(){
       alert('Salvo!');
       var clickedBox = $(this);

       $.ajax({

            type: 'PUT',
            url: 'http://localhost/datas',
            //async: false,
            data: {
                id: clickedBox.data('id'),
                nome: clickedBox.data('nome'),
                email: clickedBox.data('email')
            },
            sucess:function (success) {
                console.log('success')
            },
            error:function(err) {
                console.log(err);
            }
        });
    });
});

有人能帮帮我吗？我已经被困扰好久了......多谢！

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

你提供的代码似乎是一个AJAX请求，用于从一个URL获取数据，并将其插入到DOM中。然而，在你的data属性中，你尝试将这些值作为数组传递给jQuery的.each()函数，这似乎不是一个理想的做法。

你应该尝试使用JavaScript对象来处理这些值。例如，你可以创建一个新的对象或数组来存储这些值，然后将这个对象或数组传递给.each()函数。这样，你的数据就不再是一个数组，而是一个对象或数组。

这是修改后的代码：

$.ajax({
    type: 'GET',
    async: false, // 保持异步模式
    url: 'https://app.myurl.com/reservas',
    success: function (reservas) {
        // 将每个结果转换为对象
        var results = reservas.map(function (reserva) {
            return { _id: reserva._id, nome: reserva.nome, email: reserva.email };
        });

        // 使用新的对象替换原始的`reservasHTML`数组
        reservas.forEach(function (reserva) {
            var row = '<tr class="reservas">';
            row += '<td><input type="checkbox" class="salvar" data-id="' + reserva._id + '" data-nome="' + reserva.nome + '" data-email="' + reserva.email + '"/></td>';
            row += '<td>' + reserva._id + '</td>';
            row += '<td>' + reserva.nome + '</td>';
            row += '<td>' + reserva.email + '</td>';
            row += '</tr>';

            $('tbody').append(row);
        });
    },
    error: function (e) {
        console.log(e);
    }
});

// 添加点击事件处理器
$(function () {
    $('body').on('click', '.salvar', function () {
        alert('Salvo!');
        var clickedBox = $(this);

        $.ajax({
            type: 'PUT',
            url: 'http://localhost/datas',
            async: false, // 保持异步模式
            data: {
                id: clickedBox.data('id'),
                nome: clickedBox.data('nome'),
                email: clickedBox.data('email')
            },
            success: function (success) {
                console.log('success');
            },
            error: function (err) {
                console.log(err);
            }
        });
    });
});

在这个版本的代码中，我们首先将每条结果都转换为一个对象，然后遍历数组并将这些对象添加到DOM中。这样，你就不必再担心将数据传递给.each()函数时可能遇到的问题了。