想展示AJAX加载GIF [英] Want to show ajax loading gif

问题描述

我使用的数据表。而我所有的code是工作的罚款。现在，我希望把AJAX加载GIF。谁能帮我把阿贾克斯装载机GIF？这里是我的code。谢谢

 ＆LT;脚本类型=文/ JavaScript的字符集=utf-8＆GT;
        $（文件）。就绪（函数（）{
        $（＃dvloader）显示（）。
            oTable = $（'＃示例）。dataTable中（{
                bJQueryUI：真实，
                sPaginationType：full_numbers
            }）;
        }）;
         （文件）。就绪（函数（）{
            $（＃btnround）。点击（函数（）{
                $阿贾克斯（{
                  网址：ajax_request.php
                  缓存：假的，
                  异步：真正的，
                  数据：形= ROUND
                  成功：函数（HTML）{
                    $（。demo_jui）HTML（HTML）;
                }
                }）;
            }）;
    }）;
           ＆LT; / SCRIPT＆GT;
 

解决方案

使用了

  

ajaxStart（）

和

  

ajaxComplete（）

函数来显示和隐藏加载GIF。

  $（＃加载）。ajaxStart（函数（）{
   $（本）.show（）;
 }）;

$（＃加载）。ajaxComplete（函数（）{
   $（本）.hide（）;
 }）;
 

虽然格或元素的id

  

加载

有加载GIF。

您最后code应该是这样的：

 ＆LT;脚本类型=文/ JavaScript的字符集=utf-8＆GT;
    $（文件）。就绪（函数（）{
        $（＃dvloader）显示（）。
        oTable = $（'＃示例）。dataTable中（{
            bJQueryUI：真实，
            sPaginationType：full_numbers
        }）;
    }）;
    （文件）。就绪（函数（）{
        $（＃btnround）。点击（函数（）{
            $阿贾克斯（{
                网址：ajax_request.php
                缓存：假的，
                异步：真正的，
                数据：形= ROUND
                成功：函数（HTML）{
                    $（。demo_jui）HTML（HTML）;
                }
            }）;
        }）;
        $（＃加载）。ajaxStart（函数（）{
          $（本）.show（）;
        }）;

        $（＃加载）。ajaxComplete（函数（）{
          $（本）.hide（）;
        }）;

    }）;
＆LT; / SCRIPT＆GT;
 

I'm using DataTables. And my all code is working fine. Now I want to put ajax loading gif. Can anyone help me to put ajax loader gif? here is my code. thanks

         <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
        $("#dvloader").show();
            oTable = $('#example').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"                   
            });
        } );                 
         (document).ready(function() {
            $("#btnround").click(function(){
                $.ajax({
                  url: "ajax_request.php",
                  cache: false,
                  async: true,
                  data: "shape=ROUND",
                  success: function(html){
                    $(".demo_jui").html(html);
                }
                });
            });
    });
           </script>

解决方案

Use the

ajaxStart()

and

ajaxComplete()

functions to show and hide the loading gif.

$("#loading").ajaxStart(function(){
   $(this).show();
 });

$("#loading").ajaxComplete(function(){
   $(this).hide();
 });

While the div or element with id

loading

has the loading gif.

Your final code should look like this :

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#dvloader").show();
        oTable = $('#example').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
    });
    (document).ready(function() {
        $("#btnround").click(function() {
            $.ajax({
                url: "ajax_request.php",
                cache: false,
                async: true,
                data: "shape=ROUND",
                success: function(html) {
                    $(".demo_jui").html(html);
                }
            });
        });
        $("#loading").ajaxStart(function(){
          $(this).show();
        });

        $("#loading").ajaxComplete(function(){
          $(this).hide();
        });        

    });
</script>

这篇关于想展示AJAX加载GIF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！