如何在发送ajax请求时显示进度加载程序

How to show a progress loader when ajax request sent?

本文关键字：显示 加载 程序 请求 ajax      更新时间：2023-09-26

我有一个ajax函数来获取数据，当得到响应时，同时显示一个引导进程加载程序（circle loader）。

如何做到这一点？

Ajax函数JS:

$('#category_modal').click(function(event) {
     var url = $(this).data('url');
     var cid = $(this).data('id');
     $.ajax({
         url: '<?=$this->config->base_url()?>admin_panel/update_popup',
         type: 'post',
         data: 'id=' + cid
     }).done(function(data) {
         jQuery('#categoryModal .modal-content').html(data);
         $('#categoryModal').modal({
        "backdrop" : "static"
        });
     });
 });

https://fortawesome.github.io/Font-Awesome/examples/

动画图标可以完成这项工作。还有css：

http://cssload.net/

添加函数

beforeSend: function () {
  // show loader
}

在您的ajax调用

中

您可以通过jquery创建progress-bar类。

$('#category_modal').click(function(event) {
     /*here append your class to some element
       $(element).addClass("progress-bar");
     */
     var url = $(this).data('url');
     var cid = $(this).data('id');
     $.ajax({
         url: '<?=$this->config->base_url()?>admin_panel/update_popup',
         type: 'post',
         data: 'id=' + cid
     }).done(function(data) {
         /* when u r done remove
         $(element).removeClass("progress-bar");
         /*
     });
 });
相关文章：