按下提交后，按钮的左侧图标变为 Loading ajax icon using fontawesome

Question

请帮忙解决这个问题。

有submit-button，用图标装饰。如何使用 ajax 和 fontawesome 更改图标？按下提交后，左侧图标变为正在加载 ajax 图标并且 send button 被禁用。当ajax response error时显示错误图标，当send" button启用时显示错误信息。如果 success：显示复选标记图标。

html的一部分：

<pre>
    <div id="#form-submit" class="field decoration clearfix submit">
        <a href="" class="button add">Submit</a>
    </div>
</pre>

css部分：

.button:before {
  background: #ccc;
  background: rgba(0,0,0,.1);
  float: left;
  .....
}

.add:before {
  content: "09";
}

我尝试为ajax做这样的结构，对吗？

$(".button").click(function(e){
    e.preventDefault();
    $.ajax({
      beforeSend:function(xhr,opts){
        $(".button:before").append('<i class="fa fa-spinner" aria-hidden="true"></i>');
      },
      success(function(){
         $(".button:before").append('<i class="fa fa-check" aria-hidden="true"></i>');
       },
       .error(function(){
         $(".button:before").append('<i class="fa fa-exclamation" aria-hidden="true"></i>');
       },
});
});

Answer 1

首先添加一个 i 标签来为你的按钮添加图标，并让它有一个 class 作为 fa fa-send，如下所示。

<pre>
    <div id="#form-submit" class="field decoration clearfix submit">
    <a href="javascript:void(0)" class="button add"><i class="fa fa-send"> </i> Submit</a>
    </div>
</pre>

现在您可以更改 icon 的 class，如下所示：

$(".button").click(function(e){
    e.preventDefault();
    var _ctrl=$(this);
    _ctrl.find('i').removeClass('fa-send').addClass('fa-spinner').attr('disabled',true);
    $.ajax({
      url:url,
      type:'GET',
      success:function(){
         _ctrl.find('i').removeClass('fa-spinner').addClass('fa-check');
       },
       error:function(){
         _ctrl.find('i').removeClass('fa-spinner').addClass('fa-send').attr('disabled',false);
       },
   });
});

注意 - 你不需要 beforeSend ajax 这类东西的选项，除非你有一些操作要做，因为你可以将图标更改为只要你点击按钮。您的ajax结构中几乎没有问题，已更正

按下提交后，按钮的左侧图标变为 Loading ajax icon using fontawesome

When submit is pressed, the left icon of the button changes to Loading ajax icon using fontawesome

css

ajax

jquery

font-awesome