在循环 jquery ajax 调用时 [英] While looping a jquery ajax call
问题描述
我想使用 while 循环控制对控制器的 ajax 调用次数.
I want to control the number of ajax calls to a controller using a while loop.
var counter = 0;
$('#filter-form').submit(function (event) {
event.preventDefault();
alert("counter init = " + counter)
while (counter < 10) {
(function () {
$.ajax({
url: '/algorithm',
method: 'GET',
data: $('#filter-form').serialize() + "&counter=" + counter,
success: function (data) {
alert("The data is " + data);
setCounter(parseInt(data))
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
})();
}
alert("counter end = " + counter)
});
function setCounter(data) {
counter = data
}
控制器:
@RequestMapping(value = "/algorithm")
@ResponseBody
public String test(@RequestParam Map<String, String> allRequestParam) {
int counter = Integer.parseInt(allRequestParam.get("counter"));
counter++;
return Integer.toString(counter);
}
控制器基本上只是增加计数器并返回它，并且在 ajax 成功时:它将全局计数器设置为该数字.
The controller basically just increments the counter and returns it and in the ajax success: it will set the global counter to that number.
当我执行此操作时，页面会冻结并且我无法单击任何内容.我将 ajax 调用放在一个函数中以进行范围界定，但它仍然不起作用.当我使用 for 循环时，ajax 似乎没有调用，因为我没有收到任何成功或错误警报.
When I do this, the page just freezes and I cannot click anything. I put the ajax call in a function for scoping but it still does not work. When I use a for loop, it seems the ajax does not invoke because I do not get any success or error alerts.
推荐答案
它不起作用的原因很简单:$.ajax 调用是异步的.
It doesn't work for a simple reason: the $.ajax call is asynchronous.
以这个例子为例:
$(function() {
var t = 1;
console.log("Hey, the ajax will start! t's value: " + t);
$.ajax({
url: 'www.google.com.br',
method: 'GET',
success: function (data) {
t++;
console.log("We've received an answer! t's (incremented) value: " + t);
},
error: function (xhr, status, error) {
t++;
console.log("We've received an error! t's (incremented) value: " + t);
}
});
console.log("Hey, the ajax just ended.... Not really. t's value: " + t);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>输出为:
Hey, the ajax will start! t's value: 1
Hey, the ajax just ended.... Not really. t's value: 1
We've received an error! t's (incremented) value: 2
那是因为$.ajax 调用是非阻塞，因此在程序完成之前不会阻塞程序，允许程序继续执行下一行代码并继续在后台运行 ajax 任务.
That's because the $.ajax call is nonblocking, thus is doesn't block the program until it is finished, allowing the program to keep on executing the next line of code and continue running the ajax task in the background.
这是 SO 中经常出现的问题，因此我不会在这里再次提供解决方案，而是请您阅读有关问题的更多信息:
It is a recurrent issue in SO, so instead of providing solutions again here I'll ask you to read more on the questions:
这篇关于在循环 jquery ajax 调用时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
