Question

我有以下div：

<div id="main Div" ng-controller="nameController">
   <div class="jumbotron" style="width: 900px; background:transparent !important; float:left; margin-top: -75px; padding-bottom: 0px; padding-left: 40px; ">
      <form class="form-horizontal" id="uploadForm">
         <div class="form-group mb-3 d-lg-flex" style="margin-left:-50px;">
            <div class="col-md-12">
               <input id="upload" type="file" class="form-control" required="true" style="width:70%; margin-left:150px" placeholder="Upload file" file-model="uploadedFile" accept=".csv"/>
            </div>
            <div class="form-group" aria-label="file upload">
               <input type="submit" class="btn btn-primary" ng-click="doUploadFile()" value="Upload" style="margin-left:-50px;"/>
            </div>
         </div>
      </form>
   </div>
</div>

哪个将在提交时调用以下脚本：

$scope.doUploadFile = function() {

    var file = $scope.uploadedFile;
    var url = "/uploadfile";

    var data = new FormData();
    data.append('uploadedfile', file);

    var config = {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined
        }
    }

    $http.post(url, data, config)
        .then(
            function(response) {
                $rootScope.nameData = response.data;
            });
};

并显示此div：

<div id="alert_success" role="alert" >
    <img src="images/Success.png" width="30" height="30" style="margin-left: 5px;" alt="" hspace="5"/>
    <strong>Processed</strong> : Refer to Notes column for Status
</div>

我已经有一个加载器，它将仅在页面刷新时加载。

$(window).on('load', function() {
    $('#loading').hide();
});

我想在脚本处理函数时而不是在Windows加载器上应用加载器。

有人可以帮助实现这一目标吗？

Answer 1

jQuery具有用于处理此类情况的API。 ajaxStart / ajaxStop函数将分别在调用之前和之后进行处理。

您可以轻松配置它：

$(document)
  .ajaxStart(function () {
    //start loader
  })
  .ajaxStop(function () {
    //stop loader
  });

有关更多信息，请查看ajaxSetup()和此topic的文档以进行更广泛的讨论

在处理脚本功能而不是在窗口刷新上显示加载程序-HTML

1 个答案: