更新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' 
    } 
    }); 
});