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

【问题标题】：Ajax function inside a second Success function is not being called没有调用第二个 Success 函数中的 Ajax 函数
【发布时间】：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 调用之外移出添加行功能？
希望对您有所帮助stackoverflow.com/questions/10089447/…
是的，我有，但还是不行。
将第二个成功函数从 ajax 回调中移出
@wiseone 我在发布我的问题之前已经尝试过了，也没有用。

标签： javascript jquery ajax datatables

【解决方案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)

    })
});

【讨论】：