ajax - 在ajax调用上旋转 Font Awesome 字形

Question

下面有ajax代码

$.ajax({
            type: "POST",
            url: "shoppingcart_service.asmx/RegisterSubscriber",
            data: "email=" + SubscriberEmail, // the data in form-encoded format, ie as it would appear on a querystring
            //contentType: "application/x-www-form-urlencoded; charset=UTF-8", // if you are using form encoding, this is default so you don't need to supply it
            dataType: "text", // the data type we want back, so text.  The data will come wrapped in xml
            success: function (data) {
                $("#searchresultsA").html(data); // show the string that was returned, this will be the data inside the xml wrapper
            },
            error: function (request, status, error) {

            }
        });
    }

我如何添加一个 onbegin 函数来开始旋转调用此函数的按钮，并使用 onend ajax 函数结束它，

我正在使用 font-awesome 作为 gylphicon ( http://fontawesome.info/website-lists-and-examples-using-font-awesome-icon-css/fa-arrow-circle-right )，我需要显示旋转

<i class="fa fa-arrow-circle-right fa-2x fa-spin"></i> when call begins, there by replacing
<i class="fa fa-arrow-circle-right"></i>   

这是按钮的html

 <a href="#"  class="btn btn-warning  btn-block"   id="btnSave" ><i class="fa fa-arrow-circle-right"></i></i>Subscribe</a>

Answer 1

示例使用 jQuery JavaScript 库。

首先，使用 AjaxLoad site 创建一个 Ajax 图标.

然后将以下内容添加到您的 HTML 中:

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />

以及您的 CSS 文件的以下内容:

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

最后，您需要连接到 jQuery 提供的 Ajax 事件；一个事件处理程序用于 Ajax 请求何时开始，一个用于何时结束:

$(document).ajaxSend(function(event, request, settings) {
  $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
  $('#loading-indicator').hide();
});

取自source .