没有调用第二个 Success 函数中的 Ajax 函数

Posted 2023-03-31

【中文标题】没有调用第二个 Success 函数中的 Ajax 函数

【英文标题】：Ajax function inside a second Success function is not being called

【发布时间】：2020-08-05 21:06:43

【问题描述】：

我正在使用DataTables 库，我需要在其中发出连续的AJAX 请求。 问题是第二个Success 函数中的AJAX 函数没有被调用。 这是整个代码

$(document).ready(()=>
    $.ajax(
        url: 'http://localhost:3000/api/post/getUserData',
        method: 'post',
        dataType: 'json',
        data: 
            "email": window.email,
            "token": window.token
        ,
        success: function(data) // <-----------------------FIRST SUCCESS FUNCTION
            let table = $('#datatable').dataTable(
                data: data,
                "autoWidth": true,
                columns: [
                    'data': 'id',
                    'data': 'main',
                    'data': 'shrinked',
                    'data': 'clicks',
                    "data": "id",
                        "render": function ( data, type, row, meta ) 
                            return `<button data-id=$data onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
                        
                    ,
                    "data": "id",
                        "render": function ( data, type, row, meta ) 
                            return `<button data-id=$data onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                        
                    
                ]
            )
//------------------------------Function to add new Row inside Datatable when Form is submmitted
            $(function () 
                $('#form').bind('submit', function (event) 
                    event.preventDefault();
                    $.ajax(
                        url: 'http://localhost:3000/userShrink',
                        type: 'post',
                        datatype: 'json',
                        data: 
                            fullUrl: $('#Url').val(),
                            email: window.email,
                            token: window.token
                        ,
                        success: function ()  // <-----------------SECOND SUCCESS FUNCTION (THIS ONE IS NOT EXECUTING)
                            $.ajax(
                                url: 'http://localhost:3000/api/post/getUserData',
                                method: 'post',
                                dataType: 'json',
                                data: 
                                    "email": window.email,
                                    "token": window.token
                                ,
                                success: function(data2)
                                    console.log(data2)
                                
                            )
                        
                    );
                );
            );
        
    )
)

现在我在浏览器中检查了我的网络应用程序的Network 配置文件，

在页面加载时，此块正在执行，从而将数据提供给 DataTables 库，然后呈现表格。

$(document).ready(()=>
    $.ajax(
        url: 'http://localhost:3000/api/post/getUserData',
        method: 'post',
        dataType: 'json',
        data: 
            "email": window.email,
            "token": window.token
        ,
        success: function(data) // <-----------------------FIRST SUCCESS FUNCTION
            let table = $('#datatable').dataTable(
                data: data,
                "autoWidth": true,
                columns: [
                    'data': 'id',
                    'data': 'main',
                    'data': 'shrinked',
                    'data': 'clicks',
                    "data": "id",
                        "render": function ( data, type, row, meta ) 
                            return `<button data-id=$data onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
                        
                    ,
                    "data": "id",
                        "render": function ( data, type, row, meta ) 
                            return `<button data-id=$data onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                        
                    
                ]
            )

之后，如果form被提交，它会触发这个事件，然后POST的数据库中的数据成功。

//------------------------------Function to add new Row inside Datatable when Form is submmitted
            $(function () 
                $('#form').bind('submit', function (event) 
                    event.preventDefault();
                    $.ajax(
                        url: 'http://localhost:3000/userShrink',
                        type: 'post',
                        datatype: 'json',
                        data: 
                            fullUrl: $('#Url').val(),
                            email: window.email,
                            token: window.token
                        ,

当第二个success 函数执行或不执行时出现问题，我需要第二个成功函数的原因是将新提交的数据加载到DataTables。

success: function ()  // <-----------------SECOND SUCCESS FUNCTION (THIS ONE IS NOT EXECUTING)
                            $.ajax(
                                url: 'http://localhost:3000/api/post/getUserData',
                                method: 'post',
                                dataType: 'json',
                                data: 
                                    "email": window.email,
                                    "token": window.token
                                ,
                                success: function(data2)
                                    console.log(data2)
                                
                            )
                        

这种行为的原因可能是什么？谢谢。

【问题讨论】：

您是否厌倦了在第一个 ajax 调用之外移出添加行功能？

希望对您有所帮助***.com/questions/10089447/…

是的，我有，但还是不行。

将第二个成功函数从 ajax 回调中移出

@wiseone 我在发布我的问题之前已经尝试过了，也没有用。

【参考方案1】：

自己修好了， 这是add row 函数

$(function () 
    $('#form').bind('submit', async function (event) 
        // using this page stop being refreshing
        event.preventDefault();
        let data = 
            'fullUrl': $('#Url').val(),
            'email': window.email,
            'token': window.token
        
        let data2 = 
            'email': window.email,
            'token': window.token
        
        $.post('http://localhost:3000/userShrink', data);
        setTimeout(()=>
            $.post('http://localhost:3000/api/post/getUserData', data2).done(function (res)
                $('#datatable').DataTable().row.add(res[res.length-1]).draw();
            );
        , 1000)

    )
);