Javascript AJAX-Anfrage - Suche nach Erfolg Aktion

Question

Ich habe ein Javascript, das von einer Schaltfläche aufgerufen wird, die eine HTTP-GET-Anfrage macht. In dem Moment, in dem es auf einen Fehler stößt, zeigt es ein verstecktes div mit dem Anforderungsfehler an, was alles gut funktioniert. Hier ist das Skript:

$("#callContact1").click(function() { 
 
    console.log('starting event'); 
 
    $.ajax({ 
 
     url: "<?php echo $eventURL ;?>" + eventID + "<?php echo $eventURL ;?>", 
 
     data: {}, 
 
     type: "GET" 
 
    }) 
 
    .then(function(data, status, xhr) { 
 
     $('#ajaxResponse1').html(data).show(); 
 
     var httpStatus = status; 
 
     var httpResponseCode = (xhr.status); 
 
     console.log('httpStatus: ' + httpStatus); 
 
     console.log('httpResponseCode: ' + httpResponseCode); 
 
    }) 
 
    .fail(function(xhr) { 
 
     var httpStatus = (xhr.status); 
 
     var httpResponseCode = (xhr.getAllResponseHeaders); 
 
     var ajaxError = 'There was an requesting the event. HTTP Status: ' + httpStatus; 
 
     console.log('httpStatus: ' + httpStatus); 
 
     console.log('httpResponseCode: ' + httpResponseCode); 
 
     //make alert visible 
 
     $('#ajaxResponse1').html(ajaxError).show(); 
 
    }) 
 
})

Ich muss jetzt diese erstrecken sich leicht auf, wenn es erfolgreich ist, zeigen eine andere versteckte div mit einer Erfolgsmeldung, zB:

$('#ajaxResponseSuccess1').html('Event Update in Progress').show(); 

Ich bin mir nicht sicher, wie ich dieses Skript erweitern soll - ziemlich neu in JS und jQuery.

Answer 1

Es ist eine Erfolgsfunktion in JQuery AJAX:

Verwenden Sie es wie folgt:

.success(function(response) { 
    //DO stuff here. 
}) 

Ein besseren einfacher Code wie sein kann:

 $.ajax({ 
      url: 'http://example.com', 
      method: 'GET', 
      success: function (response) { 

      }, 
      error: function (e) { 

      } 
     }); 

Die vollständige Dokumentation von JQuery Ajax-Funktionen sind http://api.jquery.com/jquery.ajax/

OR bei

https://www.w3schools.com/jquery/ajax_ajax.asp

Answer 2

Sie registrieren zwei Rückrufe mit dem Aufruf Ajax. Sie scheinen zu wissen, dass fail bei einem Fehler ausgeführt wird. Dadurch wird der Rückruf .then bei Erfolg ausgeführt. Einfach den Anruf hinzufügen es:

.then(function(data, status, xhr) { 
    $('#ajaxResponse1').html(data).show(); 
    $('#ajaxResponseSuccess1').html('Event Update in Progress').show(); // <-- 
    // ... 
}) 

Answer 3

$.ajax({ 
     url: "<?php echo $eventURL ;?>" + eventID + "<?php echo $eventURL ;?>", 
     data: {}, 
     type: "GET", 
     success : function(data) 
     { 
     $('#ajaxResponseSuccess1').html('Event Update in Progress').show(); 
     }, 
     error:function(xhr,status) 
     { 
     alert(xhr.statusText); 
     } 
    }); 

Kurzform von Ajax:

$.get("www.xyz.com/abc",{eventId: eventId},callbackFunction);