Ajax 异步调用 - 如何克服这个问题？

Question

我是 JS 新手 - 只想从那开始。

看看这个简单的例子，我想在其中绘制 X 个仪表，其中 X 是通过 Ajax 调用从 JSON 中获取的。

<body>
<div id="gServer"></div><BR>

<script type="text/javascript" language="javascript">
/*
 * Obtain number of sessions and Server Status
 * Number of sessions is used to draw gauge per session
 */
$.ajax({
   url: url,
   dataType: 'json',
   data: jd,
   success: function(data)
   {

       //
       Server_CpuCount = data.Server_Cpu_Count;
       Server_LoadAverage = data.Server_Load_Average;
       Server_Sessions = data.Server_Sessions_Count;

       // Create Gauge for every session connected
       for (i = 0; i < Server_Sessions; i++)
       {
        arr.push(new JustGage({
                         id: "g"+i,
                         value: parseFloat(data[i].Session_Load_Average).toFixed(2),
                         min: 0,
                         max: data[i].Session_Cpu_Count,
                         title: data[i].Session_Name,
                         label: "load"
                         }));
       }

       // Create main Server Gauge
       gServer = new JustGage({
                          id: "gServer",
                          // truncate to 2 digits
                          value: parseFloat(Server_LoadAverage).toFixed(2),
                          min: 0,
                          max: Server_CpuCount,
                          title: "GridMan Server",
                          label: "load average"
                          });
   }
   });

// Write out label
document.write(Server_Sessions + "<p>sessions</p><BR>");

// Render All Sessions Gauges
// !! It does not work, ajax is async and Server_Sessions is 0
for (i = 0; i < Server_Sessions; i++)
{
    document.write("<div id=\"g"+i+"\"></div>");
}
</script>
</body>

这部分不起作用，因为 AJAX 是异步生成的，因此 Server_Sessions 始终为 0 !

 for (i = 0; i < Server_Sessions; i++)
    {
        document.write("<div id=\"g"+i+"\"></div>");
    }

如果此变量始终为 0，我如何为会话绘制仪表？

Answer 1

最初显示 0 个会话的仪表，并在 ajax 调用的成功回调函数中使用正确的数字更新它们。这是您知道获得数据的地方。如果您不希望用户看到 0 个仪表，则隐藏它们直到成功回调并在那里再次显示它们。

Answer 2

通过在 ajax 调用中使用回调函数解决了这个问题。

$.ajax({
       url: url,
       dataType: 'json',
       data: jd,
       success: function(data)
       {

       //
       Server_CpuCount = data.Server_Cpu_Count;
       Server_LoadAverage = data.Server_Load_Average;
       Server_Sessions = data.Server_Sessions_Count;
       // Create main Server Gauge
       gServer = new JustGage({
                              id: "gServer",
                              // truncate to 2 digits
                              value: parseFloat(Server_LoadAverage).toFixed(2),
                              min: 0,
                              max: Server_CpuCount,
                              title: "GridMan Server",
                              label: "load average"
                              });

       // Create Gauge for every session connected
       for (i = 0; i < Server_Sessions; i++)
       {

        // **Add Gauge on to the web page**
        $("body").append("<div id=\"g"+i+"\"></div>");

        arr.push(new JustGage({
                             id: "g"+i,
                             value: parseFloat(data[i].Session_Load_Average).toFixed(2),
                             min: 0,
                             max: data[i].Session_Cpu_Count,
                             title: data[i].Session_Name,
                             label: "load"
                             }));
       }
       }
       });

Ajax 异步调用 - 如何克服这个问题？

Ajax asynchronous call - how to overcome this?

javascript

ajax

jquery