Question

我的桌子顶部有一个按钮，显示一个启动VOIP呼叫的模态窗口 - 最终目的是调用列表中的第一个号码，然后是第二个号码，依此类推。我已经开始工作，它显示模态窗口，并允许我发起对列表中第一个数字的调用。

我现在需要更新脚本，这样如果调用成功，它会在循环中发出另一个AJAX请求，每5秒检查一次调用的状态。如果第一次通话成功，它将返回我在httpResponseText变量中存储的以下内容：

Authentication accepted<br/>ActionID = Jo9oACY52cp1

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

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

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

xshsJ6Y2eLDC,1500806656.160,ANSWER

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

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

＆＃13;

$("#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');
});

＆＃13;

<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 -->

＆＃13;

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

Answer 1

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

startCall应该启动你的调用，它会收到ajax应该使用的callURL。它返回一个承诺，一旦完成就会解决。

monitorCall接受一个callID和一个Callback（第三个param＆＃34; failed_tries＆＃34;在内部使用。）它将使用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();

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

1 个答案: