javascript – 在外部js文件中隐藏和显示ajax调用中的div

我使用的是ASP.net MVC,以下是 Html代码

$.ajax({
        type: "POST",url: urlAjax,dataType: 'json',data: dataValue,async: false,beforeSend: function () {
            $("#waitscreen").show();
        },complete: function () {
            $("#waitscreen").hide();
        },success: function (data) {
            alert("success")
        },error: function (jqXHR,textStatus,error) {
            alert("fail")
        }
    });


<div id=waitscreen>
  //some code
</div>

外部js中的代码

function _post(someparameter)
{
     $.ajax({
            type: "POST",beforeSend: function () {
                $("#waitscreen").show();
            },complete: function () {
                $("#waitscreen").hide();
            },success: function (data) {
                alert("success")
            },error) {
                alert("fail")
            }
        });
}

还尝试在上面的代码中添加文档准备它仍然无法正常工作

上面的代码运行正常,它按预期显示和隐藏,但现在我需要在每个页面重复ajax调用,所以我决定移动外部JS文件,现在相同的代码没有显示waitscreen.

我试过的事情：

>加载外部脚本 – 不工作
>在页面末尾加载外部脚本 – 不工作

问题：我想从外部JS文件中隐藏和显示工作

解决方法

以下代码段应该可以帮助您.通过在< head>中包含外部JS文件来测试主要文档和刚刚包含jQuery的下面.

// main window
var json = {"key": "value"}
     console.log('before calling _post()');
    _post(json); // call external JS


// code in external JS say test.js
function _post(someparameter)
{
    console.log('external JS called!');
    $.ajax({
          type: "POST",url: 'http://www.niketpathak.com',data: someparameter,async: true,beforeSend: function () {
              $("#waitscreen").show();
          },complete: function () {
             // $("#waitscreen").hide();
          },success: function (data) {
              alert("success")
          },error) {
              //delaying the error callback
              setTimeout(function() {
                  $("#waitscreen").hide();
                  console.log('after completing the http-request');
              },500);
          }
        });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=waitscreen>
    Waitscreen....
</div>

另外,请注意我已经使用了async：true(这也是默认值),因为不建议将其设置为false,因为它阻止了UI,这不是一个好主意.