Обновите JQuery Progressbar с помощью JSON Response в запросе ajax

Question

All

У меня есть запрос AJAX, который отправляет JSON-запрос на сервер, чтобы получить статус синхронизации. Запрос JSON и ответы приведены ниже: Я хочу отобразить индикатор выполнения пользовательского интерфейса JQuery и обновить состояние индикатора выполнения в соответствии с процентом, возвращенным в ответе 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

Если вы хотите, чтобы ваш индикатор выполнения / сообщение был помещен в div с именем «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'
    }
  });
});