在ajax请求中使用JSON响应更新JQuery Progressbar [英] Update JQuery Progressbar with JSON Response in an ajax Request
问题描述
全部
我有一个AJAX请求,该请求向服务器发出JSON请求以获取同步状态. JSON请求和响应如下:我想根据getStatus JSON响应中返回的百分比显示一个JQuery UI进度条并更新进度条状态.如果状态为不同步",则进度条不应出现,而应显示一条消息.例如:服务器处于同步状态".我该怎么办?
I have an AJAX request, which makes a JSON request to a server, to get the sync status. The JSON Request and responses are as under: I want to display a JQuery UI progressbar and update the progressbar status, as per the percentage returned in the getStatus JSON response. If the status is "insync", then the progressbar should not appear and a message should be displayed instead. Ex: "Server is in Sync". How can I do this?
//JSON Request to getStatus
{
"header": {
"type": "request"
},
"payload": [
{
"data": null,
"header": {
"action": "load",
}
}
]
}
//JSON Response of getStatus (When status not 100%)
{
"header": {
"type": "response",
"result": 400
},
"payload": [
{
"header": {
"result": 400
},
"data": {
"status": "pending",
"percent": 20
}
}
]
}
//JSON Response of getStatus (When percent is 100%)
{
"header": {
"type": "response",
"result": 400
},
"payload": [
{
"header": {
"result": 400
},
"data": {
"status": "insync"
}
}
]
}
推荐答案
假设您希望将进度条/消息放置在名为"loadingDiv"的div中:
Assuming you want your progress bar/message to be placed in a div named "loadingDiv":
$(document).ready(function() {
var myLoadingDiv = $("#loadingDiv");
myLoadingDiv.progressbar({disabled:true});
$.getJSON("getStatus.php", function(data) {
if (data.payload.data.status == "insync") {
myLoadingDiv.progressbar("disable");
myLoadingDiv.html("Server is in Sync");
}
else if (data.payload.data.status == "pending") {
myLoadingDiv.progressbar("enable");
myLoadingDiv.progressbar("value", data.payload.data.percent);
}
else {
//something else if there are any other status'
}
});
});
这篇关于在ajax请求中使用JSON响应更新JQuery Progressbar的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!