当ajax工作时显示加载器

我想在我的AJAX请求正在工作时显示全屏加载器。我怎样才能做到这一点？当ajax工作时显示加载器

$("#send").click(function() { 
    if ($("#ccval").val() == $("#contactcaptcha").text()) { 
     var id = $("#contactcaptcha").attr("data-id"); 
     var cemail = $("#cemail").val(); 

     $.post(base_url + "index.php/myad/getphonenumber", { 
      uniqueid: id, 
      emailaddress: cemail 
     }, function() { 
      alert('email is sent'); 
     }) 
    } else { 
     $("#ccval").val(""); 
     $("#ccval").attr("placeholder", "invalid captcha"); 
    } 
}) 
});

来源

2016-11-11 Shah Rushabh

@RoryMcCrossan感谢编辑这个问题。 –

创建一个元素，将其样式化为加载图标，在帖子前显示，并在您使用'.always（）;' – DBS

'收到回复后将其删除;为什么要检查captcha客户端？这是不安全的 –

$(function() { 
    $(document).ajaxStart(function() { 
     $("#Loader").show(); 
    }); 

    $(document).ajaxStop(function() { 
     $("#Loader").hide();  
    }); 

    $(document).ajaxError(function() { 
     $("#Loader").hide();  
    }); 
});

其他的答案需要你复制的显示/隐藏代码为每个Ajax调用。如果你只有1个电话，这很好，但我假设你在你的应用程序中有几个电话。

上面的代码会在所有ajax请求中显示你的加载器。我建议将它添加到你的布局页面，或者把它放在一个普通的js文件中。

#Loader是由你决定的。在我的网站中，我将它定位为具有居中进度条的固定位置元素。以下是您可以用作起点的一些基本样式。

#Loader { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    display: none; 
    background-color: #fff; 
    opacity: 0.6; 
    z-index: 99999; 
}

来源

2016-11-11 17:31:49 Kev

也许我需要在文档准备好内写这个函数 –

我正在使用短文档准备上面。请参阅https://stackoverflow.com/questions/6004129/document-ready-shorthand。您也可以将它编写为IIFE - 请参阅https：// stackoverflow。com/questions/8228281 /这是什么功能在JavaScript中的构造 – Kev

那么，首先你需要做任何你想要的图像叠加。这只是CSS/HTML，直到您的演示文稿。但这里的做到这一点的一种方法：

$(trigger).on('whatever', function(){ 
... 
    $(loading_selector).show() 
    $.ajax({ ..., 
      success:function(data) { 
       $(loading_selector).hide(); 
        } 
      }); 
});

这里的问题是，如果你的Ajax失败加载选择器不会隐藏，所以你需要在添加一些代码捕捉阿贾克斯错误和隐藏装载窗格在那个逻辑块中也是如此。

来源

2016-11-11 17:32:15 rob

你叫阿贾克斯之前使用show负载指示和隐藏它AFTE的成功或错误的情况下，也可以使用jQuery阿贾克斯的完整的处理程序

$("#send").click(function() { 
    if ($("#ccval").val() == $("#contactcaptcha").text()) { 
    var id = $("#contactcaptcha").attr("data-id"); 
    var cemail = $("#cemail").val(); 
    //Start showing loading indicator 
    showLoadingIndicator(); 
    $.post(base_url + "index.php/myad/getphonenumber", { 
     uniqueid: id, 
     emailaddress: cemail 
    }, function() { 
     hideLoadingIndicator(); 
     alert('email is sent'); 
    }) 
} else { 
    hideLoadingIndicator(); 
    $("#ccval").val(""); 
    $("#ccval").attr("placeholder", "invalid captcha"); 
}})});

来源

2016-11-11 17:32:50 Devesh

兄弟它不工作 –

@ShahRushabh我希望你会添加逻辑showLoadingIndicator和hideLoadingIndicator，这将显示与Zindex 1000和宽的div和身高为100％ – Devesh

我无法理解哪些将显示Zindex 1000像div和宽度和高度为100％的div，你可以请将它添加在代码中。 –

显示它发送请求之前和隐藏当它完成。

$('#loader').show(); 
$.post('example.php', function() { 
    alert('success'); 
}).always(function() { 
    alert('finished'); 
    $('#loader').hide(); 
});

来源

2016-11-11 17:33:06

我在哪里放置#loader？ –

任何地方在你的身体，只是申请CSS使其看起来像中心加载器@ShahRushabh –

让你的文档中的div#ajax-loader地方，并设置它的样式：

/* You can style this further - this is just an example */ 
#ajax-loader { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    color: #fff; 
    background: rgba(0, 0, 0, 0.5); 
    padding-top: 35%; 
    display: none; 
}

，并把它在文档中为：

<div id="ajax-loader">Loading content...</div>

现在，改变你jQuery代码为：

$("#send").click(function() { 
    if ($("#ccval").val() == $("#contactcaptcha").text()) { 
     var id = $("#contactcaptcha").attr("data-id"); 
     var cemail = $("#cemail").val(); 

     // notice this line 
     $('#ajax-loader').show(); 
     // this will set display: none; -> display: block; for this element 

     $.post(base_url + "index.php/myad/getphonenumber", { 
      uniqueid: id, 
      emailaddress: cemail 
     }, function() { 
      alert('email is sent'); 

      // notice this line too 
      $('#ajax-loader').hide(); 
      // just toggle the view vice-versa... 
     }) 
    } else { 
     $("#ccval").val(""); 
     $("#ccval").attr("placeholder", "invalid captcha"); 
    } 
});

编辑：此外，强烈建议下面由Kev公布的答案。

来源

2016-11-11 17:33:31 omerowitz

我添加了以下代码，但它不显示可以访问我的网站sale.coupsoft.com –

你能回答我 –

使用$就我认为可能是更容易：

$.ajax({ 
    url: base_url + "index.php/myad/getphonenumber", 
    beforeSend: function(xhr){ 
    //show load }, 
    data: { uniqueid: id, emailaddress: cemail } 
    }).done(function(d){ 
    alert('email is sent'); 
    }).always(function(){ 
    //remove load 
    })

来源

2016-11-11 17:41:47

当ajax工作时显示加载器

回答

相关问题