Question

我有一个名为notify_me.php的脚本，我这样运行：

script type="text/javascript">
    //Run notify_me.php script
    $(document).ready(function(){
      $("#submit").click(function(){
        var d = $('form').serialize();
        $.get('php/notify_me.php',d,function(data){
           $(".container").html(data);
        });
      });
    });
</script>

我希望在脚本打印之前显示动画加载.gif文件。代码是：

<div class="search_load" >
  <span class="searching_font"> Fetching your flight prices...</span><br/><br/>
  <img src="images/searchloading.gif">
</div>

如何在处理notify_me.php期间编写一个显示.search_load类的函数。 .search_load类也应该显示在.container div。

中

用append（）尝试了一些不同的方法;和appendTo（）;但似乎无法让它发挥作用。

感谢你的帮助！

编辑：我得到了.search_load div来显示我第一次点击#submit。第二次它没有显示所有。这是我试图解决的问题。有什么想法吗？！

解决方案：伙计们，我通过查看@ Rohan的链接解决了这个问题。看看下面。谢谢大家！

$(document).ready(function(){
   $("#submit").click(function(){
     $('#info').show();
     $('html,body').animate({scrollTop: $("#info").offset().top},'slow');
     $('.container').after('<div class="search_load"></div>');
     var d = $('form').serialize();
     $.get('php/notify_me.php',d,function(data){
       $(".container").html(data);
       $('.search_load').hide();
     });
   });
});

Answer 1

$(document).ready(function(){
    $('.search_load').hide();
    $("#submit").click(function(){
        var d = $('form').serialize();
        $('.search_load').show();
        $.get('php/notify_me.php',d,function(data){
        $('.search_load').hide();
            $(".container").html(data);
        });
    });
});

您还可以使用CSS隐藏div，因此您可以删除第2行：$（'。search_load'）。hide（）;

Answer 2

步骤：

隐藏加载div
加载开始时，使用.show（）显示它并修改CSS以使其放置正确
OnLoaded - ＆gt; div.hide（）

请参阅：How to show waiting message during sync ajax call in browser

Answer 3

jQuery(document).ready(function($) {
  $("#submit").click(function(){
    $(".search_load").show();
    var d = $('form').serialize();
    $.get('php/notify_me.php', d, function(data) {
       $(".container").html(data);
       $(".search_load").hide();
    });
  });
});

Answer 4

试试这个：

$('div.search_load').hide();
$('#submit').click(function() {
    $('div.search_load').show();
    var d = $('form').serialize();
    $.get('form.php', d,
    function(data) {
        $('div.search_load').hide();
        $('.container').html(data);
    },
    'html');
    return false;
});

Answer 5

试试这个：使用Javascript：

<script type="text/javascript">
 $(document).ready(function(){
      $("#submit").click(function(){
         var d = $('form').serialize();
         $(".search_load").show();
         $.get('php/notify_me.php',d,function(data){
             $(".container").html(data);
             $(".search_load").hide();
         });
      });
 });
 </script>

HTML更改：

<div class="search_load" style="display:none" >
   <span class="searching_font"> Fetching your flight prices...</span><br/><br/>
    <img src="images/searchloading.gif">
</div>

希望这会奏效。

脚本处理期间的动画gif

5 个答案: