在ajax中调用另一个ajax直到第一个完成

时间:2015-07-13 18:28:49

标签: jquery ajax

我正在使用jquery ajax在我的网站上执行某些操作。我想在每一秒钟内调用另一个ajax,直到第一个ajax响应到来。我的ajax代码是: -

$.ajax({
                    url  : $(this).attr('action'),
                    type    : $(this).attr('method'),
                    dataType: 'json',
                    data    : $(this).serialize(),
                    beforeSend: function() {
                            var row = '<tr id="row_'+i+'">';
                            row += '<td>'+$('#fileid').val()+'</td>';       
                            row += '<td>'+$('#resolution').val()+'</td>';       
                            row += '<td>'+$('#bitrate').val()+'</td>';      
                            row += '<td>'+$('#ndrive').val()+'</td>';       
                            row += '<td>'+$('.type').val()+'</td>';     
                            row += '<td>'+curr_date+'-'+curr_month+'-'+curr_year+'</td>';
                            row += '<td>'+hours+':'+minute+':'+second+'</td>';
                            row += '<td><div id="process-bar" class="process-bar" style="height: 18px;"> </div></td>';
                            row += '</tr>';     
                            $('#stastistics tbody').prepend(row);       
                            $('#fileid').val('');
                            $('#ndrive').val('');
                            $('.type').val('');
                            $('#resolution').val('');
                            $('#bitrate').val('');
                    },
                    success : function(data) 
                    {
                        if(data.status == 'error')
                        {
                            var html = '<span class="label label-danger">Error</span>';
                            $("tr#row_"+i+" td:nth-child(8)").find('#process-bar').remove();
                            $("tr#row_"+i+" td:nth-child(8)").html(html);
                        }
                        else if(data.status == 'success')
                        {
                            var html = '<span class="label label-success">Success</span>';
                            $("tr#row_"+i+" td:nth-child(8)").find('#process-bar').remove();
                            $("tr#row_"+i+" td:nth-child(8)").html(html);
                        }
                    },
                    error   : function( xhr, err ) 
                    {

                    },
                }); 

这是ajax需要很长时间才能完成,所以我想展示这个过程的进展。所以我想在每秒钟调用另一个ajax,以便每秒更新进度数据。我怎么能在这个ajax中调用另一个ajax直到第一个ajax的响应。 谢谢你的帮助。

1 个答案:

答案 0 :(得分:1)

我会做这样的事情:

var progressUpdater = setInterval(function()
{
    $.ajax({
        url: addressToProgressEndpoint,
        method: METHOD
    })
    .done(function(data)
    {
        //update UI with progress 
    });
}, 1000);

在成功回调中的原始ajax请求中,在progressUpdater上调用clearInterval()来停止它