Ajax-Fehler-Debugging-Analyse in jQuery

JQuery kapselt Ajax sehr gut. Aber in der täglichen Entwicklung stoße ich immer noch gelegentlich auf Ajax-Fehler. Hier ist eine kurze Analyse des Ajax-Fehlerberichts

Die allgemeine Verwendung von jQuery ist wie folgt: Ajax sendet die „Tom und Jerry“-Daten per Post an die Datei xxx.php. Bei Erfolg werden die zurückgegebenen Daten ausgedruckt; bei Fehlschlag wird der Fehlergrund ausgedruckt.

$.ajax({
 url:"xxx.php",
 type:"post",
 datatype:"json",
 data:{"cat":"tom","mouse":"jack"},
 success:function(data){
 console.log(data);
 },
 error:function(jqXHR,textStatus,errorThrown){<br> console.log(jqXHR.);<br> console.log(textStatus);<br> console.log(errorThrown);<br> }
});

Laut der offiziellen Dokumentation von jQuery hat ein Fehler in Ajax drei Parameter, nämlich jqXHR, textStatus und errorThrown.

Es gibt auch vier Attribute in jqXHR,

1.readyState: aktueller Status, 0 – nicht initialisiert, 1 – wird geladen, 2 – bereits geladen, 3 – Dateninteraktion, 4 – fertig.

2.Status: Zurückgegebener HTTP-Statuscode, z. B. häufige 404-, 500- und andere Fehlercodes.

3.statusText: Fehlermeldung, die dem Statuscode entspricht, z. B. 404 Fehlermeldung wurde nicht gefunden, 500 ist ein interner Serverfehler.

4.responseText: Die von der Serverantwort zurückgegebenen Textinformationen

textStatus und errorThrown sind beide Zeichenfolgentypen, bei denen es sich um die zurückgegebenen Status- bzw. Serverfehlerinformationen handelt.

Unter normalen Umständen geht Ajax in die Fehlerfunktion und gibt textStatus und jqXHR.readyState aus. Sie werden wahrscheinlich wissen, warum Ajax einen Fehler meldet. Wenn es immer noch unklar ist, drucken Sie alle Parameter aus.

Hier finden Sie eine Zusammenfassung der Situationen, in denen Ajax-Fehler auftreten. Wir werden weitere hinzufügen, wenn in Zukunft neue Sondersituationen auftreten.

Fall 1

Problem: Das Front-End verwendet das jQuery-Framework und Ajax wird für die Interaktion mit dem Back-End verwendet, bei dem es sich um PHP+MySQL handelt. Es wurde festgestellt, dass Ajax einen Fehler gemeldet hat (Ajax verwendet den Post-Typ, das JSON-Format und die Anforderungsdaten sind ein JSON-Objekt. Der gedruckte TextStatus ist „parsererror“, was einen Analysefehler bedeutet).

Verarbeitung: Dieser Ausdruck zeigt, dass Ajax erfolgreich mit dem Backend (Serverseite) interagiert hat und das Backend geantwortet und Textinformationen zurückgegeben hat. Aber das Frontend hat beim Parsen des Textes einen Fehler erhalten. Zu diesem Zeitpunkt muss ich zunächst die Textinformationen der Backend-Antwort sehen. Es gibt zwei Möglichkeiten: Eine besteht darin, jqXHR.responseText auszudrucken, und die zweite darin, ihn in NetWork unter F12 in Google Chrome anzuzeigen (andere Browser sind ebenfalls verfügbar). Die derzeit angezeigten Informationen sind 5{"status": "success"}. Es ist nicht schwer zu erkennen, dass dieser Text die Daten eines JSON-Objekts enthält, es handelt sich jedoch nicht um vollständige JSON-Daten. Wenn der Fehler entdeckt wird, gehen Sie direkt zur PHP-Datei, um die entsprechenden Informationen zu ändern und den überflüssigen Druck zu entfernen. Lösen Sie das Problem. Darüber hinaus können auch unqualifizierte JSON-Objektdaten dieses Problem verursachen. Beispielsweise enthalten {'status':'success'}-Daten einfache Anführungszeichen.

Fall 2

Problem: Das Front-End verwendet das jQuery-Framework, verwendet Ajax für die Interaktion mit dem Back-End und lässt dann das Back-End die Datenbank betreiben, und das Back-End ist NodeJS. Es wurde festgestellt, dass Ajax nicht reagierte, es keine Erfolgsrückruffunktion und keine Fehlerrückruffunktion gab.

Verarbeitung: Überprüfen Sie zunächst, ob die Funktion implementiert wurde, und stellen Sie fest, dass das Backend die Verarbeitung tatsächlich durchgeführt hat und die Datenbank relevante Änderungsvorgänge abgeschlossen hat. Das Problem ist ganz klar. Das Backend hat nach der Verarbeitung nicht auf das Frontend reagiert. Das Problem kann gelöst werden, indem nach Abschluss der Back-End-Verarbeitung der entsprechende Antwortcode hinzugefügt wird. Es ist ersichtlich, dass der Ajax-Fehlerstatuscode tatsächlich vom Back-End gesendet wird.

Das Obige ist eine Zusammenfassung der während der persönlichen Entwicklung aufgetretenen Probleme und ihrer Lösungen. Wenn etwas nicht stimmt, korrigieren Sie mich bitte.