AJAX请求 - 添加额外的GET请求内部循环

Question

AJAX请求 - 添加额外的GET请求内部循环

我在顶部有一个按钮,显示一个模态窗口以启动VOIP呼叫 - 最终目的是调用列表中的第一个数字,然后调用第二个数字,依此类推.我有它工作,它显示模态窗口,并允许我发起呼叫列表中的第一个数字.

我现在需要更新脚本,以便在调用成功的情况下,然后在循环中发出另一个AJAX请求,每5秒检查一次调用的状态.如果第一次调用成功,它将返回我存储在httpResponseText变量中的以下内容:

Authentication accepted<br/>ActionID = Jo9oACY52cp1

Run Code Online (Sandbox Code Playgroud)

我需要解析ActionID值 - 在上面的例子中这将是Jo9oACY52cp1- 然后有另一个GET请求通过传递ActionID来获取当前调用的状态,如下所示:

https://www.acme.com/GetStatus.php?ActionID=$action_id

Run Code Online (Sandbox Code Playgroud)

此请求返回3个值 - ActionID,UID,STATUS - 如下所示:

xshsJ6Y2eLDC,1500806656.160,ANSWER

Run Code Online (Sandbox Code Playgroud)

我只对第三个值 - STATUS感兴趣 - 我需要继续检查此请求的结果,直到状态不相等IN_PROGRESS.此时我可以启用"下一个呼叫"按钮并重新开始.

这是我当前的表格和脚本:

$("#startBulkContactCall").click(function() {
  $(this).attr('selectedRow', '1');
  contactMobile = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactMobile');
  contactName = $($($('table > tbody > tr:nth-child(1) > td:nth-child(2)').children())[0]).attr('contactName');
  $('#callNextBulkContact').prop('disabled', true);
  firstURL = "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile;
  console.log('firstURL: ' + firstURL);
  $.ajax({
      url: "<?php echo $callBackURL ;?>" + defaultCallBackNumber + "<?php echo $contactCallBack ;?>" + contactMobile,
      data: {},
      type: "GET"
    })
    .then(function(data, status, xhr) {
      var httpStatus = status;
      var httpResponseCode = (xhr.status);
      var httpResponseText = (xhr.responseText);
      $('#ajaxSuccessBulk').html('Call in Progress').show();
      $("#startBulkContactCall").prop("disabled", true);
      $("#callNextBulkContact").prop("disabled", true);
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var httpResponseCode = (xhr.getAllResponseHeaders);
      var httpResponseText = (xhr.responseText);
      var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
      //make alert visible 
      $('#ajaxError').html(ajaxError).show();
    })
});

$('#callNextBulkContact').click(function() {
  $('#callBulkContact').attr('selectedRow', parseInt($('#callBulkContact').attr('selectedRow')) + 1);
  var rowNum = parseInt($('#callBulkContact').attr('selectedRow'));
  var row = 'table > tbody > tr:nth-child(' + rowNum + ') > td:nth-child(2)';
  contactMobile = $($($(row).children())[0]).attr('contactMobile');
  contactName = $($($(row).children())[0]).attr('contactName');
});

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<button type="button" id="bulkCallButton" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span> Bulk Call</button>


<table class="table table2 table-striped table-bordered" width="100%">
  <thead>
    <th scope="col">Name</th>
    <th scope="col">Mobile</th>
  </thead>
  <tbody>
    <tr id="D8F49748-212A-42D8-A188-4C23556027FA">
      <td><a href="details.php?action=contactLink&contactID=D8F49748-212A-42D8-A188-4C23556027FA">John Citizen</a></td>
      <td><a href="#" contactName="John Citizen" contactMobile="0412345678" data-toggle="modal" data-rec-id="1537" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0412 345 678</a></td>
    </tr>
    <tr id="EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7">
      <td><a href="details.php?action=contactLink&contactID=EAD2DCCA-7EFA-B048-AD7D-8FCC0ED5EFD7">Jonah McMahon</a></td>
      <td><a href="#" contactName="Jonah McMahon" contactMobile="0490876543" data-toggle="modal" data-rec-id="1538" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0490 876 543</a></td>
    </tr>
    <tr id="D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">
      <td><a href="details.php?action=contactLink&contactID=D9AA7744-E138-4A0E-86A2-B8D0CD2007D6">Jake Simpson</a></td>
      <td><a href="#" contactName="Jake Simpson" contactMobile="0405999666" data-toggle="modal" data-rec-id="1577" data-target="#contactCallModal"><span class="glyphicon glyphicon-earphone"></span> 0405 999 666</a></td>
    </tr>
  </tbody>
</table>


<div class="modal" id="contactBulkCallModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Call Contact</h4>
      </div>
      <div class="modal-body">
        <p>Calling </p>
      </div>
      <div id="ajaxError" class="alert alert-danger text-center" role="alert" style="display:none">
        Error Response
      </div>
      <div id="ajaxSuccess" class="alert alert-success text-center" role="alert" style="display:none">
        Call in Progress
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="startBulkContactCall" class="btn btn-success">Start Call</button>
        <button type="button" id="callNextBulkContact" class="btn btn-success">Next</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Run Code Online (Sandbox Code Playgroud)

从来没有必要做这么复杂的AJAX请求(至少对我来说)并且不确定从哪里开始在循环中添加额外的请求？

Answer 1

Sal*_*ter 3

这就是我要做的：首先在函数中单独编写代码，这将使事情变得更容易理解。

startCall 应该发起您的呼叫，它接收 ajax 应该使用的 callURL。它返回一个承诺，一旦做出就会解决。

MonitorCall 接受一个 callID 和一个 Callback（第三个参数“failed_tries”在内部使用。）它将使用 ajax 触发状态检查，并每 5 秒调用自己一次，直到发生 5 次连续失败，或者直到我们获得正确的状态。回调是一个常见的 JS 回调，以错误和结果作为参数。

getMonitoredCall 将把前两个函数连接在一起，以给出一个承诺，该承诺将在呼叫结束后解决。

getNewCallUrl 用于提供另一个调用。该函数将在每次呼叫之前调用，以检索要呼叫的人。那里还有工作等着你！它应该返回一个提供 URL 作为结果的承诺。

最后，loopCalls 启动一切，一旦调用完成，将再次调用自身以跟进下一个调用，直到出现故障。

function startCall(callURL){
    return $.ajax({
        url: callURL,
        data: {},
        type: "GET"
    }).then(function(data, status, xhr) {
        var httpStatus = status;
        var httpResponseCode = (xhr.status);
        var httpResponseText = (xhr.responseText);
        $('#ajaxSuccessBulk').html('Call in Progress').show();
        $("#startBulkContactCall").prop("disabled", true);
        $("#callNextBulkContact").prop("disabled", true);

        return Promise.resolve(xhr.responseText.match(/ActionID = (.+)/)[1]);
    })
    .fail(function(xhr) {
        var httpStatus = (xhr.status);
        var httpResponseCode = (xhr.getAllResponseHeaders);
        var httpResponseText = (xhr.responseText);
        var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
        //make alert visible 
        $('#ajaxError').html(ajaxError).show();
    });
}
function monitorCall(callID,callback,failed_tries){
    failed_tries = failed_tries || 0;
    $.ajax({
        url: 'https://www.acme.com/GetStatus.php',
        data: {ActionID:callID},
        type: "GET"
    }).then(function(data){
        if(data && data.split(',')[2] != "IN_PROGRESS"){
            callback(null,data);
        }else{
            setTimeout(monitorCall.bind(null,callID,callback,0),5000);
        }
    }).fail(function(xhr){
        failed_tries++;
        if(failed_tries>5){
            callback("Error trying to get the status, stopping after 5 consecutive tries.");
        }else{
            setTimeout(monitorCall.bind(null,callID,callback,failed_tries),5000);
        }
    });
}

function getMonitoredCall(callUrl){
    return new Promise(function(resolve,reject){
        startCall(callUrl).then(function(callID){
            monitorCall(callID,function(err,res){
                if(err){
                    reject(err);
                }else{
                    resolve(res);
                }
            });
        });
    });
}

function getNewCallUrl(){
    return $.ajax({
        url: "http://getNewCallUrl/",
        data: {},
        type: "GET"
    }).then(function(data, status, xhr) {
        //Let's presume the request simply returns a call URL.
        return Promise.resolve(data);
    })
    .fail(function(xhr) {
        var httpStatus = (xhr.status);
        var httpResponseCode = (xhr.getAllResponseHeaders);
        var httpResponseText = (xhr.responseText);
        var ajaxError = 'There was an error requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
        //make alert visible 
        $('#ajaxError').html(ajaxError).show();
    });
}

function loopCalls(){
    getNewCallUrl().then(function(callUrl){
        return getMonitoredCall(callUrl);
    }).then(function(){setTimeout(loopCalls,5000)});
}
loopCalls();

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，2 月前
查看次数：	404 次
最近记录：	9 年，2 月前