我有一个网页与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>
我的猜测是,如果你想在同一时间在飞行中多个JSONP调用,你必须让jQuery动态创建回调名称,而不是你指定它。如果你指定回调名称,那么所有的Ajax调用将使用相同的回调名称,事情会变得非常混乱,因为jQuery无法分辨哪个响应是哪个。 – jfriend00 2014-11-21 15:01:33
要改变的第一件事就是'response'被添加到 - 使用'response [rowNum] = ...'来获得成功和错误。然后,通过构建一个.then()链,来改变调用模式以顺序执行ajax请求。 – 2014-11-21 22:31:26