Actualice JQuery Progressbar con JSON Response en una solicitud de ajax

Todas,

Tengo una solicitud AJAX, que hace una solicitud JSON a un servidor, para obtener el estado de sincronización. La solicitud JSON y las respuestas son las siguientes: Deseo mostrar una barra de progreso de la interfaz de usuario de JQuery y actualizar el estado de la barra de progreso, según el porcentaje devuelto en la respuesta de getStatus JSON. Si el estado es “insync”, entonces la barra de progreso no debería aparecer y debería mostrarse un mensaje en su lugar. Ejemplo: “El servidor está en sincronización”. ¿Cómo puedo hacer esto?

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

Suponiendo que quiere que su barra de progreso / mensaje se coloque en un div llamado “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' } }); });