jquery - 用mvc中的加载图标替换按钮

Question

我正在使用 asp.net MVC4 并通过 jquery 和 asp.net mvc 发布进行大量客户端到服务器端的交互。

我在页面上有一个按钮，点击它可以触发它。当用户单击它并在服务器处理完成后返回正常状态时，是否可以轻松地将按钮变成加载图标？

Answer 1

Demo Fiddle

That would be very simple to do,

$('#btnSubmit').click(function(){
             $(this).attr('disabled','disabled');
             $('#yourLoadingImage').show();


           $.ajax({
             url: "test.html",
                }).done(function() {
                   $(this).attr('disabled','');
                   $('#yourLoadingImage').hide();
            });

       });

You just need to place your image properly.

Answer 2

当然。您在按钮旁边有一个隐藏的“加载图标”。您有按钮的 onclick 功能隐藏按钮并显示加载图标。您有来自服务器的回调隐藏加载图标并显示按钮。太容易了。

Answer 3

您可以做的是禁用按钮并在 span/div 中显示加载图像旁边。然后进行 ajax 调用，当您从您的操作方法（在 ajax 回调方法中）获得响应时，检查响应并隐藏进度图像并将按钮更改为启用。

<input type="button" value="Save" id="btnSave" class="normal" />
<div id="progress" style="display:none;"></div>

你的 javascript 将是

$(function(){

  $("#btnSave").click(function(e){    
    e.preventDefault();

    var _this=$(this);

    //Let's disable the button to avoid duplicate posting
     _this.attr('disabled', 'disabled');

    //show the loading image
    $("#progress").html("<img src='PathToSomeLoadingImage.gif' />").show();

    //now make your ajax call
    $.post("@Url.Action("Check","User")",function(data){

       //check the response and enable the button
       _this.removeAttr("disabled", "disabled");

       //hide the progress bar div
       $("#progress").hide();

    }); 

  }); 

});

Answer 4

                $.ajax({
        type:'POST',
        url:'',
        data:'variable='+searchword,
                    complete:function(){
                       // here before server procceses
                    }
        success:function(data){
               //when proccesing completed
            }
        }