在数据表中完成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查询后绘制了此数据表，我想运行另一个后台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在Datatable中创建该行时会调用该查询）。

我正在将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查询。

谢谢！！ 上面的回答无疑帮助我进行了思考。