Question

我有一个Javascript函数需要很长时间才能运行。我想显示一个加载图标，直到javascript函数返回，但在加载函数时页面上没有任何内容;页面是白色的，不做任何事情。

如果我使用Chrome进行调试，我会在调用该函数之前看到我的加载图标，然后在调用该函数时它会消失。我以为我可以对包含Javascript的PHP页面进行AJAX调用，但是AJAX响应实际上包含了javascript ...

$.ajax({
  type: "POST",
  url: "resources/scripts/loadXML.php",
  data: "datafile="data_file_path,
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

然后我回来了。 MSG等于此（实际上是页面中的脚本）。

<script type="text/javascript">

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",<?php echo json_encode($data_file); ?>,false);
xmlhttp.send();
return xmlhttp;
</script>

我根本不希望我的页面是白色的，它会加载该功能......任何想法！？

修改

我想运行此代码asynch，以便它不会阻止我的页面。我希望在此函数运行时看到一个微调器。以前，它在同一页面上，所以我可以轻松地将文件设置为打开，但现在如果我进行异步调用，我需要将其放在另一个文件中。但是，如何将参数传递给该文件？！：

<script type="text/javascript">

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",**$NEEDTOGETTHEFILENAME**,false);
xmlhttp.send();
return xmlhttp;
</script>

Answer 1

添加一个beforeSubmit处理程序，用于加载微调器或其他东西，让用户知道页面正在加载。

$.ajax({
  type: "POST",
  url: "resources/scripts/loadXML.php",
  data: "datafile="data_file_path,
  beforeSubmit: function(){
        //show a spinner here
  },
  success: function(msg){
    //remove spinner
    alert( "Data Saved: " + msg );
  }
});

Answer 2

由于您使用jquery执行请求，最简单的方法是将请求包装在

中

$(document).ready(function(){
  //show spinner
  //your ajax request here
}

并在请求返回时使用您的内容隐藏或替换微调器。

这引出了一个问题：为什么你要做一个ajax请求让脚本做另一个ajax请求？你究竟想在这里完成什么？

运行Javascript Async，以便页面不会阻止

2 个答案: