亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 ajax 編輯時未定義的值

使用 ajax 編輯時未定義的值

揚帆大魚 2022-07-21 21:33:11
我正在嘗試使用 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的新手
查看完整描述

3 回答

?
鴻蒙傳說

TA貢獻1865條經驗 獲得超7個贊

您的問題是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; }

還有其他選擇。


查看完整回答
反對 回復 2022-07-21
?
catspeake

TA貢獻1111條經驗 獲得超0個贊

由于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);

        });

    });


查看完整回答
反對 回復 2022-07-21
?
回首憶惘然

TA貢獻1847條經驗 獲得超11個贊

試試這個從 data-id 屬性中獲取 id

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

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


查看完整回答
反對 回復 2022-07-21
  • 3 回答
  • 0 關注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號