在 ajax 请求中使用 JSON 响应更新 JQuery 进度条答案

【问题标题】：Update JQuery Progressbar with JSON Response in an ajax Request在 ajax 请求中使用 JSON 响应更新 JQuery 进度条
【发布时间】：2011-02-13 11:54:12
【问题描述】：

全部，

我有一个 AJAX 请求，它向服务器发出 JSON 请求，以获取同步状态。 JSON 请求和响应如下：我想根据 getStatus JSON 响应中返回的百分比显示一个 JQuery UI 进度条并更新进度条状态。如果状态为“不同步”，则不应出现进度条，而是应显示一条消息。例如：“服务器处于同步状态”。我该怎么做？

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

【问题讨论】：

标签： php json jquery-ui jquery

【解决方案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'
    }
  });
});

【讨论】：