不显示 AJAX 加载程序
ajax loader does not display
我有正常工作的jquery Ajax,
当 ajax 调用方法时如何显示消息?
我做了一些方法,但它无法正常工作.
function drawChart(posId) {
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json',
url: '@Url.Action("GetProviderReport", "Report")',
data: { posId: posId },
beforeSend: function () { $("#loaderDiv").css("display","block"); },
success: function(result) {
var data1 = new google.visualization.DataTable();
var data2 = new google.visualization.DataTable();
var data3 = new google.visualization.DataTable();
var months = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'ابان', 'اذر', 'دی', 'بهمن', 'اسفند'];
data1.addColumn('string', 'ماه');
data1.addColumn('number', 'مجموع نظر سنجی');
for (var i = 0; i < result.length; i++) {
if (result[i].typeValue == 1) {
data1.addRow([months[result[i].MonthValue - 1], result[i].CountValue]);
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv7'));
这是HTML标签<div id="loaderDiv" style="visibility: hidden">در حال دریافت اطلاعات</div>
如果这是一个点击事件,则可以在用户单击按钮( $("#loaderDiv").css("display","block")时添加加载器;)然后在 get 调用完成后删除加载程序( $("#loaderDiv").css("显示","无");)
<div>
<button id="btn">Click me</button>
<script type="text/javascript">
$(function(){
$("#btn").click(function(event) {
clicked();
});
var clicked = function(){
alert("add loader");
//use the ajax call instead of setTimeout
setTimeout(function() {
//Remove the loader inside success/complete function
alert("remove loader")
}, 2000);
}
});
如果 ajax 调用是此函数中的唯一内容,那么您可以将 CSS 部分移动到函数的第一部分然后在成功/错误部分再次隐藏它 - 需要同时隐藏两者,以防 ajax 失败。
function drawChart(posId) {
$('#loaderDiv').css('visibility', 'visible');
//OR
$('#loaderDiv').show();
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json',
url: '@Url.Action("GetProviderReport", "Report")',
data: { posId: posId },
success: function(result) {
$('#loaderDiv').css('visibility', 'hidden');
//OR
$('#loaderDiv').hide();
相关文章:
- Emberjs应用程序加载在除Index之外的所有路由上
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 加载Js文件应用程序加载
- 如何在服务器中为我的Firefox OS应用程序加载远程内容-在Web和FxOS设备中
- 如何使应用程序加载独立于web服务调用
- HTML 页面在通过 Chrome 扩展程序加载时显示不正确
- 从Nodejs应用程序加载HTML表
- 通过引导程序加载/重置后更改按钮文本
- PhoneGap(Cordova)应用程序加载谷歌图表API时崩溃
- Cordova windows 8应用程序:加载外部javascript(谷歌地图)
- 在应用程序加载和 angularjs 中的每个状态更改时调用 jquery 插件
- 模态对话框加载 jquery 在控制台中执行,但不从应用程序加载.js
- Chrome扩展程序:加载并执行外部脚本
- 如何在 requirejs 中使用填充程序加载 knockout.observableDictionary 插件
- 在 Web 应用程序加载时加载 JSON 响应(JQuery,Django)
- 如何从客户端应用程序加载融合表 csv
- 谷歌网络应用程序加载脚本不适用于HTML输出
- Javascript 应用程序 - 加载数据
- 在应用程序加载时显示离子侧菜单
- 从应用程序加载网页,然后单击该页面上的链接