使用 ajax 编辑时未定义的值

Question

我正在尝试使用 ajax 从我的数据库中获取数据。所以在控制器中我得到了 id，但是当去编辑模式时，id 是未定义的。这里是控制器中的代码：router.post('/ajax/edit_groups/:id', async (req, res) => {    console.log("edit")    let [data_group, err] = await model.getById(req.params.id)    console.log(req.params.id)    console.log(data_group)    res.json(data_group)});ejs代码：<table id="groups_table" class="table table-striped table-bordered" style="width: 100%;font-size:14px;">    <thead class="thead-dark">        <tr style="text-align: center;">            <th>Group Name</th>            <th>Group Description</th>            <th>Role</th>            <th>Action</th>        </tr>    </thead>    <tbody>        <%  if(groupData){            for(var i=0;i < groupData.length; i++){            if(groupData[i].role == 1) groupData[i].role = "Admin";            else groupData[i].role = "User";        %>        <tr>            <td><%= groupData[i].name%></td>            <td><%= groupData[i].desc%></td>            <td><%= groupData[i].role%></td>            <td>                 <div class="text-center">                <a href="#" class="data" title="Edit" data-id="<%= groupData[i].id%>">                    <span class="fas fa-edit fa-lg"style="color: #000000; font-size: 15px;">                </a>                <a href="" title="Delete">                    <span class="fas fa-trash-alt fa-lg"                      style="color: rgb(206, 17, 17); font-size: 15px;">                </a>                </div>            </td>        </tr>    <% };%>    <% }%>    </tbody></table>在这里，控制台日志的结果，数据ID未定义..所以我知道如何解决这个问题..我还是nodejs ejs的新手

Answer 1

您的问题是this回调中的关键字是指 window 对象，而不是您期望的 .data 元素。

您可以执行以下操作。

我将元素存储在外部范围中以记住单击的元素，因此我们可以在回调中访问其数据集。

$('.data').on('click', function(event){

        // here im storing the element

        //  you can probalby also access it with $(this) and store it

        const dataEl = event.target

        axios.post('ajax/edit_groups/' + dataEl.dataset.id)

        .then(function (response){

            // in the callback I access the element that is in the outer scope

            console.log("in: ", dataEl.dataset.id)

            $('#editGroups').modal('show');

            $('#id_group').val(response.data_group[0].id);

            $('#name').val(response.data_group[0].group_name);

            $('#desc').val(response.data_group[0].group_desc);

            $('#inputRole').val(response.data_group[0].role);

        }).catch(function (error){

            console.log(error)

    })

}

注意：我没有测试代码，它只是为了说明问题可以通过哪种方式解决。

您可能想寻找替代方法。在使用this. _

由于锚标记中有一个元素，因此您需要确保不捕获它的点击事件。这与所谓的事件委托有关。

实现这一点的一种简单方法实际上是使用 CSS。

 .data span { pointer-events: none; }

还有其他选择。

Answer 2

由于ajax是异步的，所以不能直接调用响应。尝试在您的函数上添加异步等待，例如：

    $('.data').on('click', async function() {

    await axios

        .post('ajax/edit_groups/' + $(this).attr('data-id'))

        .then(function(response) {

            console.log('in: ', $(this).attr('data-id'));

            $('#editGroups').modal('show');

            $('#id_group').val(response.data_group[0].id);

            $('#name').val(response.data_group[0].group_name);

            $('#desc').val(response.data_group[0].group_desc);

            $('#inputRole').val(response.data_group[0].role);

        })

        .catch(function(error) {

            console.log(error);

        });

    });

Answer 3

试试这个从 data-id 属性中获取 id

console.log("in: ", $(this).dataset.id)

参考 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes