在 Datatable 中完成 AJAX 查询后，如何为每个将行数据传递给它的数据行运行另一个 AJAX 查询？

Question

在使用 window.onload 函数加载页面时，我正在使用 jQuery.ajax 向端点发送 AJAX 查询

如果此 AJAX 查询成功，我将初始化一个 Datatable 并使用从查询接收到的数据呈现它。像这样的：

//Global variables
var jrow=0;
var rdata = new Array();
var table2;
var rinfo={};
var prow=0;

//AJAX success function
success: function (data, status, jqXHR) {
                for (var key in data) {
                    if (data.hasOwnProperty(key)) {
                        //Copying the data received array into rdata array
                        rdata[key] = data[key];
                    }
                }

                // Initializing the Datatable
                table2 =
                        $('#dataTables-example').DataTable( {
                            "bProcessing": false,
                            "destroy": true,
                            "aaData": data,// <-- your array of objects
                            "sDefaultContent": "",
                            "aoColumns": [
                                {"mData": "text"},
                                {
                                    "mRender": function (data, type, full)
                                    {
                                    //Rendering unique div IDs for each row
                                        btn2 = '<div id="jiralink' + jrow + '"></div>'
                                        jrow++;
                                        return btn2;
                                    }
                                }
                    ]
                } );
            },

现在，一旦在 AJAX 查询成功完成后绘制了这个 Datatable，我想运行另一个后台 AJAX 查询，通过将行数据对象和行索引传递给函数来检索每一行的 JIRA 链接。

我想到实现这一点的方法是为 AJAX 查询的complete 事件定义这个函数。所以，是这样的：

 //AJAX Complete function
 complete: function(){
            //Since rdata is the array object of the entire datatable
            for (k in rdata) {
                 //row data object
                 rinfo = rdata[k];
          //So, for each row data, calling my function to retrieve JIRA Link
                 start_long_task(rinfo, prow)
                 prow = prow+1;
            }
            } 

最后，我的start_long_task 函数看起来像这样：

function start_long_task(rinfo, prow) {

        div = $('<div class="jiralink' + prow+ '"><div></div><div>0%</div><div>&nbsp;</div></div><hr>');
        $('#jiralink' + prow).append(div);

       //Using nanobar to show the progress bar
        var nanobar = new Nanobar({
            bg: '#44f',
            target: document.getElementById('jiralink'+prow)
        });

            $.ajax({
                type: 'POST',
                url: '/retrieveticket',
                contentType: 'application/json',
                data: JSON.stringify(rinfo),
                processData: false,
                dataType: 'json',
                success: function (data, status, request) {
                    status_url = request.getResponseHeader('Location');
                    update_progress(status_url, nanobar, div[0]);
                },
                error: function () {
                    alert('Unexpected error');
                }
            });
    }

问题是这似乎不起作用。我认为将行索引值初始化为 0 然后递增它是问题所在。我还有其他方法可以解决这个问题吗？

有没有其他方法可以在绘制数据表一次后，在后台逐行遍历每一行，将行数据和索引传递给我的start_long_task 函数，以便与该行对应的正确 JIRA 链接是否显示在该行单元格中？

Answer 1

在对此进行了相当长的一段时间后，我已经想出了如何使这项工作：

我的 createdRow 函数现在看起来像这样：

"createdRow": function (row, data) {
          $.ajax({
                type: 'POST',
                url: '/retrievejiraticket',
                contentType: 'application/json',
                data: JSON.stringify(data),
                processData: false,
                dataType: 'json',
                success: function (data, status, request) {
                     status_url = request.getResponseHeader('Location');
                     sh(status_url, data, row)
                            }
                   });
            }

sh 函数如下所示：

function sh(status_url, data, row){
            jQuery.ajax({
                url: status_url,
                contentType: 'application/json',
                data: JSON.stringify(data),
                dataType: 'json',
                context: row,
                processData: false,
                success: function (data) {
                    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {
                        if ('issue_link' in data) {
                            issue_key = data['issue_key'];
                                $('#jiralink', this).html(issue_key);
                        }
                        else {
                            console.log("Alert")
                        }
                    }
                    else {
                        setTimeout(sh(status_url, data, row), my_delay);
                    }

                }
            });

        }

而且，就是这样。

如您所见，我正在另一个 AJAX 查询中运行 AJAX 查询（通过调用函数 sh）（当第一次通过函数 createdRow 在数据表中创建行时调用该查询）。

我将status_url、data 和row 传递给sh 函数。 status_url 是 Celery 任务状态 URL，我会定期查询以了解当 POST 请求发送到端点 /retrievejiraticket 时提交的作业状态。 data 是数据对象，其中包含来自 Celery 后端的响应数据。 row 是我用来将context 设置为this 的当前行的行对象。

最棘手的部分是循环运行函数sh，直到每行的Celery任务完成（通过setTimeout函数）。

如果我在第一个 AJAX 查询本身内部调用第二个 AJAX 查询而不定义函数，我无法做到这一点。我必须定义一个函数 (sh)，然后在这个函数中定义我的第二个 AJAX 查询。

所以，在第一个 AJAX 查询完成后，我使用成功函数，然后调用 sh 函数在其中执行我的第二个 AJAX 查询。

谢谢！！上面的回答肯定帮助我思考了这个问题。