在处理脚本函数时显示加载程序，而不是在窗口刷新时显示HTML

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()的文档和本主题以了解更广泛的讨论