Javascript 使用ajax编辑时未定义的值

我试图使用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未定义。。那么idk如何解决这个问题。。我还是nodejsejs的新手，因为ajax是异步的，所以不能直接调用响应。尝试在函数上添加async Wait，如：

    $('.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);
        });
    });

---

因为ajax是异步的，所以不能直接调用响应。尝试在函数上添加async Wait，如：

    $('.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);
        });
    });

---

尝试此操作以从数据id属性获取id

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

供参考

---

尝试从数据id属性获取id

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

供参考

---

您的问题是回调中的

this

关键字引用的是窗口对象，而不是预期的.data元素

你可以像下面这样做

我将元素存储在外部作用域中以记住单击的元素，这样我们就可以在回调中访问其数据集

$（'.data'）。在（'click'，函数（事件）{
//这里我存储元素
//您可能还可以使用$（this）访问它并存储它
const dataEl=event.target
axios.post（'ajax/edit_groups/'+dataEl.dataset.id）
.然后（功能（响应）{
//在回调中，我访问外部作用域中的元素
console.log（“in:”，dataEl.dataset.id）
$（“#编辑组”）.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_组[0].role）；
}).catch（函数（错误）{
console.log（错误）
})
}

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

您可能需要寻找其他方法。在使用

此

时，您可以实际使用和其他一些方法

由于锚定标记中有一个元素，因此需要确保不捕获其单击事件。这与称为事件委派的内容有关

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

.data span{指针事件：无；}

---

还有其他选项。

您的问题是回调中的

this

关键字引用的是窗口对象，而不是预期的.data元素

你可以像下面这样做

我将元素存储在外部作用域中以记住单击的元素，这样我们就可以在回调中访问其数据集

$（'.data'）。在（'click'，函数（事件）{
//这里我存储元素
//您可能还可以使用$（this）访问它并存储它
const dataEl=event.target
axios.post（'ajax/edit_groups/'+dataEl.dataset.id）
.然后（功能（响应）{
//在回调中，我访问外部作用域中的元素
console.log（“in:”，dataEl.dataset.id）
$（“#编辑组”）.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_组[0].role）；
}).catch（函数（错误）{
console.log（错误）
})
}

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

您可能需要寻找其他方法。在使用

此

时，您可以实际使用和其他一些方法

由于锚定标记中有一个元素，因此需要确保不捕获其单击事件。这与称为事件委派的内容有关

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

.data span{指针事件：无；}

---

还有其他选项。

内部函数中的

这个
是指什么？你能记录
这个
吗？@theool-im使用$（this）来选择data-id的属性。是的，所以当你在内部函数中控制台.log（this）时。它是什么？@theool-it-show”窗口{parent:Window，opener:null，top:Window，length:0，frames:Window，…}“…这是您的问题。这是指窗口而不是.data元素。内部函数中的
this
甚至指的是什么？您能用$（this）记录
this
吗？@TheFool-im使用$（this）对于选择data-id的属性。是的，所以当您在内部函数中控制台.log（this）时。它是什么？@TheFool它显示“Window{parent:Window，opener:null，top:Window，length:0，frames:Window，…}”…这就是您的问题。这是指窗口而不是.data元素。您将async await与promise语法混合在一起。他的语法有效，您的语法可能无效。您将async await与promise语法混合在一起。他的语法有效，您的语法可能无效。他的方法也应该有效。您所做的是通过prop访问属性erty getter。但是，如果这样做有效，get属性也必须起作用。它们是可互换的。结果仍然未定义..“无法读取未定义的属性“id”它可能正在选择返回数组的类。在进行循环时尝试分配唯一id，并获取单击项的id并将其传递给HIS。您所做的是通过反射属性getter访问属性。但是，如果这样做有效，get属性也必须起作用。它们可以互换。结果仍然未定义。。“无法读取未定义的属性'id'”它可能正在选择返回数组的类。在进行循环时尝试分配唯一id，并获取单击项的id并将其传递给我尝试了此操作，但仍然未定义和“窗口{父：窗口，打开者：null，顶部：窗口，长度：0，帧：Wind”