我对一个php文件进行了ajax调用。我收到了结果。现在我正在调查是否可以让ajax请求每1秒自动执行一次。我将结果发布到名为hidden
的输入字段中。如何在不必调用函数的情况下每三秒执行一次ajax调用?
$.ajax({
type: 'POST',
url: 'increment.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#hidden').val(data);// first set the value
}
});
答案 0 :(得分:36)
您可以通过重复的一系列setTimeout
来电来完成此操作。 (不要使用setInterval
进行ajax
来电,您很快就会出现混乱; setInterval
会触发下一个ajax呼叫,即使之前的呼叫也是如此还没有完成。)
使用setTimeout
来安排第一个电话,然后在完成时安排下一个电话,等等:
var interval = 1000; // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
$.ajax({
type: 'POST',
url: 'increment.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#hidden').val(data);// first set the value
},
complete: function (data) {
// Schedule the next
setTimeout(doAjax, interval);
}
});
}
setTimeout(doAjax, interval);
请注意,我正在使用complete
而不是success
来安排下一次调用,以便中断(“网络连接暂时中断,无论如何”)不会导致进程中断。
答案 1 :(得分:12)
你可能想要考虑的是Server Sent Events(SSE)
这是一种HTML5技术,Javascript将“long-poll”一个服务器端点(您的PHP文件),以查看是否发生了任何更改。长轮询基本上是JS(我不确定它是否使用Ajax或其他技术)每秒向端点发送一个请求
你可以这样试试:
#/your_js
var evtSource = new EventSource("increment.php");
evtSource.onmessage = function(e) {
$('#hidden').val(e.data);
}
要发送数据,您可以进行ajax调用,将更新的JSON对象发送到服务器,就像您一样:
$(document).on("click", ".your_object", function(data) {
$.ajax({
type: 'POST',
url: 'increment.php',
data: $(this).serialize(),
dataType: 'json'
});
});
这只会在您执行事件时打开Ajax请求,并且您的应用程序将每秒“监听”响应。如您所知,Ajax长轮询是超级资源密集型的,因此如果您想要真正的“实时”技术,那么查看Web套接字的东西会更好,但不管怎样,这将是一个更高效的系统而不只是使用普通的ajax
此处需要注意 - 您必须更改increment.php
以处理不同的响应类型
答案 2 :(得分:5)
是的,可以使用 setInterval
1)将ajax保留在一个函数中。
function fun() {
$.ajax({
type: 'POST',
url: 'increment.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#hidden').val(data);// first set the value
}
});
}
2)现在使用setInterval
,您可以每秒执行一次。
var interval = setInterval(fun, 1000);
3)暂停/清除使用clearInterval
clearInterval(interval);
4)正如其他人指出的那样,使用setInterval
ajax
并不明智,所以请尝试使用
var interval;
function callAjax() {
$.ajax({
type: 'POST',
url: 'increment.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#hidden').val(data);// first set the value
interval = setTimeout(callAjax, 1000);
}
});
}
callAjax();
//clearTimeout(interval);