30

私は非常に単純なことをしたいと思っています。私のページには 1 つのボタンがあります。

<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

今私が欲しいのは、ユーザーがこの送信ボタンを押したときです。サーバーからの応答を取得するまで、gif アニメーションを「ロード」していることを示しています。

しかし、私は長い間苦労してきました。

これを実装するにはどうすればよいですか？

4

6 に答える 6

39

ajax を使用している場合 (可能な限りシンプルにします)

  1. 読み込み中の gif 画像を html に追加し、非表示にします (html 自体のスタイルを使用して、別の CSS に追加できます):

    <img src="path\to\loading\gif" id="img" style="display:none"/ >

  2. ボタンがクリックされたときに画像を表示し、成功関数で再び非表示にします

    $('#buttonID').click(function(){
  $('#img').show(); //<----here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

ajax エラー コールバックでも画像を非表示にして、ajax が失敗した場合でも gif が非表示になるようにしてください。

于 2013-03-08T06:30:37.997 に答える
7

試す

$("#btnId").click(function(e){
 e.preventDefault();
 //show loading gif

 $.ajax({
  ...
  success:function(data){
   //remove gif
  },
  error:function(){//remove gif}

 });
});

編集：コメントを読んだ後

ajaxに反対する場合に備えて

$("#btnId").click(function(e){
     e.preventDefault();
     //show loading gif
     $(this).closest('form').submit();
});
于 2013-03-08T06:27:31.590 に答える
7

成功するまで ajax 呼び出しの特定の div をロードしてブロックするのに最適なのは、Blockui です。

このリンクにアクセスしてください http://www.malsup.com/jquery/block/#element

使用例:

 <span class="no-display smallLoader"><img src="/images/loader-small.png" /></span>

脚本

jQuery.ajax(
{   
 url: site_path+"/restaurantlist/addtocart",
 type: "POST",
 success: function (data) {
   jQuery("#id").unblock(); 
},
beforeSend:function (data){
    jQuery("#id").block({ 
    message: jQuery(".smallLoader").html(), 
    css: { 
         border: 'none', 
         backgroundColor: 'none'
    },
    overlayCSS: { backgroundColor: '#afafaf' } 
    });

}
});

これが本当に役立つことを願っています。これは非常にインタラクティブです。

于 2013-03-08T06:53:27.943 に答える
3 
$("#btnId").click(function(e){
      e.preventDefault();
      $.ajax({
        ...
        beforeSend : function(xhr, opts){
            //show loading gif
        },
        success: function(){

        },
        complete : function() {
           //remove loading gif
        }
    });
});
于 2013-03-08T06:52:35.693 に答える
0 
            //do processing
            $(this).attr("label", $(this).text()).text("loading ....").animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {//processing finalized
                    $(this).text($(this).attr("label")).animate({ disabled: false }, 1000, function () {
                    })
                });
            });
于 2014-03-18T17:33:08.893 に答える