更新JQuery的进度与AJAX请求

Question

所有的JSON响应，

我有一个AJAX请求，这使得JSON请求到服务器，以获取同步状态。 JSON请求和响应如下：我想显示一个JQuery UI进度条，并根据getStatus JSON响应中返回的百分比更新进度条状态。如果状态为“insync”，则不应出现进度条，而应显示消息。例如：“服务器同步”。我怎样才能做到这一点？

//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" 
      } 
     } 
    ] 
} 

Answer 1

假设你要放置在一个名为 “loadingDiv” 一个div您的进度条/消息：

$(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' 
    } 
    }); 
});