为jQuery AJAX调用实现一个加载指示器 [英] Implement a loading indicator for a jQuery AJAX call

问题描述

我有一个从链接启动的Bootstrap模式。大约3秒钟它只是空白，而AJAX查询从数据库中提取数据。我怎样才能实现某种加载指示器？ twitter引导程序默认提供此功能吗？

I have a Bootstrap modal which is launched from a link. For about 3 seconds it just sits there blank, while the AJAX query fetches the data from the database. How can I implement some sort of a loading indicator? Does twitter bootstrap provide this functionality by default?

编辑：模态的JS代码

<script type="text/javascript">
  $('#myModal').modal('hide');
  $('div.divBox a').click(function(){
    var vendor = $(this).text();
    $('#myModal').off('show');
    $('#myModal').on('show', function(){             
      $.ajax({
        type: "GET",
        url: "ip.php",
        data: "id=" + vendor,
        success: function(html){
          $("#modal-body").html(html);
          $(".modal-header h3").html(vendor);
          $('.countstable1').dataTable({
            "sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
              "sLengthMenu": "_MENU_ records per page"
            },
            "aaSorting":[[0, "desc"]],
            "iDisplayLength": 10,
            "oTableTools": {
              "sSwfPath": "swf/copy_csv_xls_pdf.swf",
              "aButtons": ["csv", "pdf"]
            }
          });
        }
      });
    });
  });
  $('#myModal').on('hide', function () {
    $("#modal-body").empty();
  });
</script>

推荐答案

我猜你正在使用jQuery.get或者其他一些jQuery ajax函数来加载模态。您可以在ajax调用之前显示指示器，并在ajax完成时将其隐藏。例如

I'm guessing you're using jQuery.get or some other jQuery ajax function to load the modal. You can show the indicator before the ajax call, and hide it when the ajax completes. Something like

$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });

这篇关于为jQuery AJAX调用实现一个加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！