Question

我正在使用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",
            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")
            }
        });
}

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

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

我尝试的事情：

加载外部脚本 - 不工作
在页面末尾加载外部脚本 - 无法正常工作

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

Answer 1

以下代码段可以为您提供帮助。通过在主文档的<head>中包含外部JS文件并在jQuery的包含之下进行测试。

＆＃13;

// 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',
          dataType: 'json',
          data: someparameter,
          async: true,  
          beforeSend: function () {
              $("#waitscreen").show();
          },
          complete: function () {
             // $("#waitscreen").hide();
          },
          success: function (data) {
              alert("success")
          },
          error: function (jqXHR, textStatus, error) {
              //delaying the error callback
              setTimeout(function() {
                  $("#waitscreen").hide();
                  console.log('after completing the http-request');
              }, 500);
          }
        });
};

＆＃13;

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

＆＃13;

另外，请注意我已使用async: true（这也是默认设置），因为将其设置为false是已弃用，因为它阻止了用户界面并不是一个好主意。

Answer 2

我在External.js文件中的ajax代码，

function _post() 
{
  var data = {
    Email: "a@a.com",
    Password:"1111"
    }
$.ajax({
    type: "POST",
    url: "/Home/hello/",
    dataType: 'json',
    data: data,
    async: false,
    beforeSend: function () {
        $("#waitscreen").show();
    },
    complete: function () {
        $("#waitscreen").hide();
    },
    success: function (data) {
        alert("success")
    },
    error: function (jqXHR, textStatus, error) {
        alert("fail")
    }
});

}

在我的HomeController中，我有这样的hello方法，

    [HttpPost]
    public ActionResult hello(LoginViewModel data)
    {
        ViewBag.Message = "Your contact page.";

        return Json(data, JsonRequestBehavior.AllowGet);
    }

在我的所有观点中，我都有＆＃34; waitscreen＆＃34; DIV。现在我只是将External.js文件引用到我的_Layout页面，我只是在jquery引用之后拖放。

<script src="~/Scripts/External.js"></script>

然后在同一个_Layout页面的末尾，我只是调用这样的方法，

<script>
   _post();
</script>

一切正常。注意：如果hello操作方法中只有一个参数，并且假设您编写了类似（int x）的参数，那么在这种情况下它将通过500错误。因为在你的RouteConfig.js中提到了，默认情况下参数名称应该是id。所以你需要编写int id。希望能帮到你。

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

2 个答案: