显示进度条或阻止 UI 直到文件在服务器端生成

Question

我正在对从 MS SQL 服务器数据库中提取的一些数据进行强制定向布局（使用 d3.js http://bl.ocks.org/mbostock/raw/4062045/）。目前我正在使用 python 脚本生成 json 文件，然后使用 python -m SimpleHTTPServer 在本地服务器上运行它。

我想要做的是在我的 python 脚本和 HTML 之间创建一个链接，这样当我输入网址时，python 脚本应该在服务器端运行并生成 json 文件。在此期间，我需要阻止 UI。生成文件后，图形应显示在屏幕上。我可以分别生成图形和 json 文件。需要将它们与 blockui 或进度条放在一起（我认为进度条会太多）。

我是 javascript 和 web 开发的菜鸟，在创建我的图表时有点学习。对此方向的任何指导将不胜感激。

谢谢，

普拉提克

编辑：

目前的sn-p代码如下：

d3.json("json_data.json", function(error, graph) 
{

  var nodeMap = {};
  graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
  graph.links = graph.links.map(
  function(x) 
  {
    return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value
        };
  });

  force
       .nodes(graph.nodes)
      .links(graph.links)
      .start();

我将把这段代码放在 ajax 请求的成功部分下。我希望脚本发送 ajax 请求一分钟，以查看服务器上是否存在 json_data.json 文件，并在创建文件时显示纺车，如果时间用完，则控制转移到错误请求部分。

json文件简单如下：

nodes: {}
links: {} //without any children level of depth.

Answer 1

如果您使用的是 jQuery，请查看 http://api.jquery.com/jQuery.ajax/ 以了解如何创建您的 ajax 请求。您可能希望将请求放在页面的 $(document).ready() 函数的开头。然后，您可以使用blockUI，如您所述，在开始 ajax 调用之前阻塞页面，然后在您在 ajax 调用中定义的成功和错误（或完成）回调中解除阻塞。类似于以下内容：

$(document).ready(function() {
    $('body').blockUI();
    $.ajax({
        url: http://www.example.com/pathYouAreListeningOn,
        data: {
            "dataYouNeedToSend" : "Here"
        },
        success: function(result, status, xhr) {
            $('body').unblockUI();
            // Whatever you need to do to display your graph
        },
        error: function(xhr,status,error) {
            $('body').unblockUI();
        }
     });
});

需要注意的是，如果您的 url 请求将是您所在页面的 url，您不需要包含它，并且如果您没有任何需要使用 ajax 发送的数据请求您也可以将其关闭。