Wenn submit gedrückt wird, ändert sich das linke Symbol der Schaltfläche in das Laden eines Ajax-Symbols mit fontawesome

Question

Bitte helfen Sie, dieses Problem zu lösen.

Es gibt submit-button, die mit Symbol verziert ist. Wie ist es möglich, Icon-Änderungen mit ajax und fontawesome vorzunehmen? Wenn submit gedrückt wird, ändert sich das linke Symbol zu Loading ajax icon und send button ist deaktiviert. Wenn ajax response error, dann Fehler-Symbol anzeigen, und send" button aktiviert ist, zeigen Sie eine Fehlermeldung an. Wenn success: Häkchensymbol anzeigen.

Teil html:

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

Teil für CSS:

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

.add:before { 
    content: "\2709"; 
} 

Ich versuche, eine solche Struktur für Ajax zu machen, ist es richtig?

$(".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

Zu allererst fügen Sie ein i Tag-Symbol auf Ihre Schaltfläche hinzufügen und lassen Sie es wie unten eine Klasse als fa fa-send haben.

<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> 

Jetzt können Sie die Klasse für icon wie unten ändern:

$(".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); 
     }, 
    }); 
}); 

Hinweis - Sie brauchen nicht beforeSendajax Option für diese Art von Stoffen, es sei denn, Sie einige Operationen müssen innerhalb tun Sie können das Symbol ändern, sobald Sie auf die Schaltfläche klicken. Sie haben wenige Probleme in Ihrer ajax Struktur, die korrigiert wurde