2014-11-21 68 views
0

我有一个网页与HTML表。 在每一行中,我都有一个指向另一台服务器上的一些宁静服务的链接。通过jQuery的多个Ajax调用失败,并没有调用回调

当我按下一行中的按钮时,ajax调用执行得很好,我得到了答案。 我试图从循环表中调用表中的所有服务。 我将这些调用添加到javascript数组中,然后使用应用来执行它们。

只有一个调用被执行并返回数据。 在检查中检查网络我可以看到来自restful服务的结果,但是jquery keep回调没有被调用。

我知道我做延期对象有问题,但我不明白如何正确使用它们。

你可以看到在 http://distml.kstergiou.net/single.html

单呼页,并且 http://distml.kstergiou.net/batch.html

批次的版本,你能帮我找到我到底做错了什么?

分批页面(jQuery和HTML)的代码是

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 

    <script> 

    var response = []; 
    var restArray = []; 

    $(document).ready(function() { 

     $('#execBatch').click(function(){ 
      $('#tblMethods tr').each(function(){ 
       var self = $(this); 
       var inp = self.find('.execSingle'); 
       var urlStr = inp.attr("data-exec"); 
       var rowNum = inp.attr('data-rownum'); 
       var clfData = ''; 

       if (urlStr != undefined) { 
        restArray.push($.ajax({ 
          cache: true, 
          type: "GET", 
          url: urlStr, 
          data: clfData, 
          contentType: "application/javascript", 
          dataType: "jsonp", 
          crossDomain: true, 
          jsonp: 'callback', 
          jsonpCallback: 'callback', 
          success: function (data) { 
           response.push(data.strResult); 
           console.log('success'); 
          }, 
          error: function (xhr, status, error) { 
           console.log(error); 
           response[rowNum] = 'Error<br>Status<br>' + status + 'Error Message<br>' + error; 
          } 
         }) 
        ) 
       } 
      }); 

      $.when.apply(null, restArray).done(function(){ 
       console.log(arguments); 
        for(var i = 0; i < arguments.length; i++) { 
         console.log(arguments[i][0].strResult); 
        } 
       }).fail(function (jqXHR, status, error) { 
        console.log(status + ' --- ' + error); 
      }); 
     }); 

     $('.showSingle').click(function() { 
      var self = $(this); 
      var rowNum = self.attr('data-rownum'); 
      $('#output').html('<pre>' + response[rowNum] + '</pre>'); 
     }); 

    }); // document.ready 

</script> 

    </head> 
<body> 
<div class="container"> 

    <div class="row"> 
     <div class="col-xs-12"> 
      <table id="tblMethods" style="border:1px solid blue; width:100%" class="table"> 
       <thead style="border:1px solid green; background-color: #e0e0e0"> 
       <tr> 
        <th>#</th> 
        <th>Server</th> 
        <th>Classifier</th> 
        <th>Filter</th> 
        <th>DataFile</th> 
        <th>Evaluate</th> 
        <th>numFolds</th> 
        <th style="display:none">execute</th> 
        <th style="display:none">completed</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr><td>0</td><td>Server 1 - locahost</td><td>Naive Bayes</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle0" data-rownum="0" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/0/clfid/0/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle0" data-rownum="0" class="showSingle btn btn-xs btn-info"></td></tr> 
       <tr><td>1</td><td>Server 1 - locahost</td><td>SMO</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle1" data-rownum="1" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/1/clfid/1/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle1" data-rownum="1" class="showSingle btn btn-xs btn-info"></td></tr> 
       <tr><td>2</td><td>Server 1 - locahost</td><td>J48</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle2" data-rownum="2" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/2/clfid/7/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle2" data-rownum="2" class="showSingle btn btn-xs btn-info"></td></tr> 
       <tr><td>3</td><td>Server 1 - locahost</td><td>RandomForest</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle3" data-rownum="3" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/3/clfid/8/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle3" data-rownum="3" class="showSingle btn btn-xs btn-info"></td></tr> 
       <tr><td>4</td><td>Server 1 - locahost</td><td>RandomTree</td><td>No Filter</td><td>Anneal</td><td>false</td><td>10</td><td><input type="button" value="Exec" id="execSingle4" data-rownum="4" data-exec="http://clouddom.ergologic.gr:8080/com.alchemist.ml/rowid/4/clfid/9/filterid/0/fileid/0/eval/false/numfolds/10/" class="btn btn-xs btn-success execSingle" style="display:none"></td><td><input type="button" value="Show" id="showSingle4" data-rownum="4" class="showSingle btn btn-xs btn-info"></td></tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 

    <br> 
     <input type=button name="BuildAll" id="execBatch" class="btn btn-xs btn-info execBatch" value="Build All"/> 
    <hr> 

    <div id="output" style="border:1px solid red"></div> 
</body> 
</html> 
+0

我的猜测是,如果你想在同一时间在飞行中多个JSONP调用,你必须让jQuery动态创建回调名称,而不是你指定它。如果你指定回调名称,那么所有的Ajax调用将使用相同的回调名称,事情会变得非常混乱,因为jQuery无法分辨哪个响应是哪个。 – jfriend00 2014-11-21 15:01:33

+0

要改变的第一件事就是'response'被添加到 - 使用'response [rowNum] = ...'来获得成功和错误。然后,通过构建一个.then()链,来改变调用模式以顺序执行ajax请求。 – 2014-11-21 22:31:26

回答

-1

你使用JSONP,功能callback上调用Ajax请求的回报。但是这个函数没有在你的代码中定义。你需要实现它。

+0

在JSONP中,它是在返回的脚本中创建回调函数的服务器。 – jfriend00 2014-11-21 15:02:50

+0

@ jfriend00在他提供的链接中,返回了方法调用,但没有返回方法本身,导致上述错误。 (至少,当这个例子工作的时候) – derMrich 2014-11-21 16:08:37