我使用 AJAX 从 PHP 文件发出和检索 API 调用,然后使用 jQuery IF 语句显示某些数据。
返回的数据有几种不同的状态,例如:“就绪”、“正在进行”、“DNS”和“错误”。每个状态都有一条附带的消息。
对于一种特定状态“进行中”,我想继续循环浏览 JavaScript 函数,直到状态更改为其他状态。如果状态为“进行中”,则更改可能需要长达 1 分钟的时间,因此如果可能的话,我希望以 5 秒的间隔循环执行 JavaScript 函数。
我在下面包含了我的 jQuery。
$(document).ready(function() {
//Stops the submit request
$("#myAjaxRequestForm").submit(function(e){
e.preventDefault();
});
//checks for the button click event
$("#myButton").click(function(e){
$("#ajaxResponse").empty();
//get the form data and then serialize that
dataString = $("#myAjaxRequestForm").serialize();
//get the form data using another method
var hostName = $("input#hostName").val();
dataString = "host=" + hostName;
//make the AJAX request, dataType is set to json
//meaning we are expecting JSON data in response from the server
$.ajax({
type: "GET",
url: "api.php",
data: dataString,
dataType: "json",
//if received a response from the server
success: function( response ){
var data = response.status;
if ((data == 'READY' && response.endpoints[0].statusMessage == 'Ready' )) {
$("#ajaxResponse").append("<b>Status:</b> " + response.endpoints[0].statusMessage+ "<br>");
$("#ajaxResponse").append("<b>Host:</b> " + response.host+ "<br>");
$("#ajaxResponse").append("<b>Port:</b> " + response.port+ "<br>");
$("#ajaxResponse").append("<h3>Endpoint [0]</h3><b>Server Name:</b> " + response.endpoints[0].serverName+ "<br>");
$("#ajaxResponse").append("<b>IP Address:</b> " + response.endpoints[0].ipAddress+ "<br>");
$("#ajaxResponse").append("<b>Grade:</b> " + response.endpoints[0].grade+ "<br>");
$("#ajaxResponse").append("<h3>Endpoint [1]</h3><b>Server Name:</b> " + response.endpoints[1].serverName+ "<br>");
$("#ajaxResponse").append("<b>IP Address:</b> " + response.endpoints[1].ipAddress+ "<br>");
$("#ajaxResponse").append("<b>Grade:</b> " + response.endpoints[1].grade+ "<br>");
$("#ajaxResponse").append("<h3>Endpoint [2]</h3><b>Server Name:</b> " + response.endpoints[2].serverName+ "<br>");
$("#ajaxResponse").append("<b>IP Address:</b> " + response.endpoints[2].ipAddress+ "<br>");
$("#ajaxResponse").append("<b>Grade:</b> " + response.endpoints[2].grade+ "<br>");
}
else if ((data == 'READY' && response.endpoints[0].statusMessage != 'Ready')) {
$("#ajaxResponse").append("<b>Status: </b>" +response.endpoints[0].statusMessage+ "<br>");
$("#ajaxResponse").append("<b>Server Name: </b>" + response.endpoints[0].serverName+ "<br>");
$("#ajaxResponse").append("<b>IP Address: </b>" + response.endpoints[0].ipAddress+ "<br>");
}
else if (data == "DNS") {
$("#ajaxResponse").html("<div><b>No cached result found.<br><br>" +response.statusMessage+ "<br>..please wait a few mins and try again.</b></div>");
}
else if (data == "IN_PROGRESS") {
$("#ajaxResponse").html("<div><b>No cached result found.<br><br>" +response.endpoints[0].statusMessage+ "<br>..please wait a few mins and try again.</b></div>");
}
else if (data == "ERROR") {
$("#ajaxResponse").html("<div><b>Error.<br><br>" +response.statusMessage+ "<br></b></div>");
}
else {
$("#ajaxResponse").html("<div><b>error</b></div>");
}
},
});
});
});
最佳答案
将 AJAX 请求移至函数(例如 doAjax()),以便您可以根据需要调用它。单击按钮时调用 doAjax()。当返回的状态为“In Progress”时,使用setTimeout()在5秒后递归调用相同的函数。
AJAX 请求大约每 5 秒发出一次,直到状态变为“进行中”以外的状态。 (我说“大致”是因为 AJAX 请求本身需要时间,并且请求完成后会开始 5 秒的延迟。)
更新了 JavaScript:
$(document).ready(function () {
//Stops the submit request
$("#myAjaxRequestForm").submit(function (e) {
e.preventDefault();
});
//checks for the button click event
$("#myButton").click(function (e) {
e.preventDefault(); // Prevent default button click action
doAjax();
});
});
function doAjax() {
//$("#ajaxResponse").empty(); Move this to reduce appearance of refreshing
//get the form data and then serialize that
dataString = $("#myAjaxRequestForm").serialize();
//get the form data using another method
var hostName = $("input#hostName").val();
dataString = "host=" + hostName;
//make the AJAX request, dataType is set to json
//meaning we are expecting JSON data in response from the server
$.ajax({
type: "GET",
url: "api.php",
data: dataString,
dataType: "json",
//if received a response from the server
success: function (response) {
var data = response.status;
if ((data == 'READY' && response.endpoints[0].statusMessage == 'Ready')) {
$("#ajaxResponse").empty();
$("#ajaxResponse").append("<b>Status:</b> " + response.endpoints[0].statusMessage + "<br>");
$("#ajaxResponse").append("<b>Host:</b> " + response.host + "<br>");
$("#ajaxResponse").append("<b>Port:</b> " + response.port + "<br>");
$("#ajaxResponse").append("<h3>Endpoint [0]</h3><b>Server Name:</b> " + response.endpoints[0].serverName + "<br>");
$("#ajaxResponse").append("<b>IP Address:</b> " + response.endpoints[0].ipAddress + "<br>");
$("#ajaxResponse").append("<b>Grade:</b> " + response.endpoints[0].grade + "<br>");
$("#ajaxResponse").append("<h3>Endpoint [1]</h3><b>Server Name:</b> " + response.endpoints[1].serverName + "<br>");
$("#ajaxResponse").append("<b>IP Address:</b> " + response.endpoints[1].ipAddress + "<br>");
$("#ajaxResponse").append("<b>Grade:</b> " + response.endpoints[1].grade + "<br>");
$("#ajaxResponse").append("<h3>Endpoint [2]</h3><b>Server Name:</b> " + response.endpoints[2].serverName + "<br>");
$("#ajaxResponse").append("<b>IP Address:</b> " + response.endpoints[2].ipAddress + "<br>");
$("#ajaxResponse").append("<b>Grade:</b> " + response.endpoints[2].grade + "<br>");
} else if ((data == 'READY' && response.endpoints[0].statusMessage != 'Ready')) {
$("#ajaxResponse").empty();
$("#ajaxResponse").append("<b>Status: </b>" + response.endpoints[0].statusMessage + "<br>");
$("#ajaxResponse").append("<b>Server Name: </b>" + response.endpoints[0].serverName + "<br>");
$("#ajaxResponse").append("<b>IP Address: </b>" + response.endpoints[0].ipAddress + "<br>");
} else if (data == "DNS") {
$("#ajaxResponse").html("<div><b>No cached result found.<br><br>" + response.statusMessage + "<br>..please wait a few mins and try again.</b></div>");
} else if (data == "IN_PROGRESS") {
$("#ajaxResponse").html("<div><b>No cached result found.<br><br>" + response.endpoints[0].statusMessage + "<br>..please wait a few mins and try again.</b></div>");
// Call this function again after 5 seconds
setTimeout(function () {
doAjax();
}, 5000);
} else if (data == "ERROR") {
$("#ajaxResponse").html("<div><b>Error.<br><br>" + response.statusMessage + "<br></b></div>");
} else {
$("#ajaxResponse").html("<div><b>error</b></div>");
}
},
});
}
关于php - 重复 JavaScript AJAX 请求,直到状态发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29482175/