jquery form plugin, keine Fehlerbehandlung

Question

Es scheint, dass es keine Fehlerbehandlung im Jquery.Form-Plugin gibt, was sehr frustrierend ist. Obwohl die Dokumentation besagt, dass wir die Optionen von $ .ajax verwenden können, kann ich die Option "error" immer noch nicht verwenden, wenn der Server einen Fehler zurückgibt, insbesondere die Serien 500 und 400. Kann dieses Plugin überhaupt keinen Fehler vom Server verarbeiten oder ist es ein Bug, etc? Kann mir bitte jemand sagen, wie ich Fehler (400, 500, etc) mit diesem Plugin umgehen kann? Ich brauche deine Hilfe ... Alles was ich will ist eine einfache Fehlerbehandlung ... Danke.

$("#uploadingImg").hide(); 

var options = {//Define ajax options 
    type: "post", 
    target: "#responsePanel", 
    beforeSend: function(){ 
     $("#uploadingImg").show(); 
    }, 
    complete: function(xhr, textStatus){ 
     $("#uploadingImg").hide(); 
    }, 
    success: function(response, statusString, xhr, $form){ 
     // I know what to do here since this option works fine 
    }, 
    error: function(response, status, err){ 
     // This option doesn't catch any of the error below, 
     // everything is always 'OK' a.k.a 200 
     if(response.status == 400){ 
      console.log("Sorry, this is bad request!"); 
     } 
     if(response.status == 601){ 
      sessionTimedOut(); 
     } 
    } 
} 
$("#polygonUploadForm").submit(function(){ 
    $(this).ajaxSubmit(options); // Using the jquery.form plugin 
    return false; 
}); 

Answer 1

habe gerade herausgefunden, dass die jquery.form selbst nicht Server-Fehler behandeln nicht-Plugin, da es den Zugriff auf Response-Header haben nicht wegen der Art und Weise ‚Datei-Eingabe‘ Tag-Datei-Upload verarbeitet. Also ich denke, die W3C muss dieses lästige Tag überprüfen, das nicht nur Sie nicht mit CSS style, sondern macht auch nicht einfach Server-Antwort-Handhabung.

Es muss einen Weg, obwohl um sie herum sein ...

Lassen Sie mich wissen, wenn ich etwas Falsches gesagt und lassen Sie mich wissen, Ihre Gedanken zu diesem ‚Input-Datei‘ tag ...

Answer 2

In Optionen

var options = { 
    target:  '#output2',  
    beforeSubmit: showRequest, 
    success:  showResponse, 
timeout: 1000 
}; 

Es gibt keinen Trigger-Aufruf im Falle eines Fehlers. Das Plugin hängt nur, wenn Sie eine 500 oder 404 bekommen. Der Erfolg ist nur auf "Erfolg" handeln, also ist das alles, was wir für jetzt haben.

Answer 3

Das jQuery Plugin-Formular tut Griff Fehler und die documentation korrekt in die besagt, kann es die $ .ajax Optionen verwenden. Es gibt jedoch zwei Modi, in denen das Plugin läuft - normal und Datei-Upload. Das Problem, das Sie haben, ist, weil Sie eine Datei hochladen ausführen. (Sie sagen das nicht, aber Sie haben "#uploadingImg" und "#polygonUploadForm" und, rekursive Argumentation, haben Sie dieses Problem.)

Dies wird häufig angegeben, aber Sie können eine Datei mit AJAX nicht hochladen . Diese Problemumgehung besteht darin, einen iframe zu verwenden. Form submit sendet eine normale HTTP-Anfrage und lädt die Server-Antwort im iframe. Das Plugin ergreift die Antwort und voila. Da dies wie eine normale HTTP-Anforderung geschieht, gelten die Regeln und Verhaltensweisen von $ .ajax nicht (weil es nicht verwendet wird). Das einzige, was das Form-Plugin tun kann, ist zu behandeln, was immer es als Erfolg bekommt. In Bezug auf den Code wird das Hochladen von Dateien niemals das Attribut "error" auslösen, das ajaxForm() oder ajaxSubmit() zugewiesen ist. Wenn Sie wirklich beweisen möchten, dass dies keine AJAX-Anfrage ist, fügen Sie dem Formular einen ajaxComplete() - Handler hinzu (d. H. Völlig unabhängig von den Methoden des Form-Plugins). Es wird auch nicht ausgelöst. Oder sehen Sie sich Firebugs Net-> XHR-Panel an.

Das ist also - der Upload ist keine AJAX-Anfrage. Das Beste, was Sie tun können, ist die Arbeit innerhalb der 'Erfolg' oder 'vollständigen' Rückrufe von ajaxForm()/ajaxSubmit(). Sie haben keinen Zugriff auf den eigentlichen HTTP-Antwortcode, können jedoch die Antwort überprüfen. Wenn die Antwort leer ist oder nicht, was Sie erwarten, können Sie den Rückruf "Fehler" tatsächlich auslösen, indem Sie xhr.abort() aufrufen. Anstatt "wenn (gute Antwort) {yay!} Else {oh nein!}" Zu machen, macht das Aufrufen von abort() und das Auslösen von 'error' den Code etwas sauberer und verständlicher.Hier ist ein Codebeispiel:

$("#uploadForm").ajaxForm({ 
    success: function(response, textStatus, xhr, form) { 
     console.log("in ajaxForm success"); 

     if (!response.length || response != 'good') { 
      console.log("bad or empty response"); 
      return xhr.abort(); 
     } 
     console.log("All good. Do stuff"); 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
     console.log("in ajaxForm error"); 
    }, 
    complete: function(xhr, textStatus) { 
     console.log("in ajaxForm complete"); 
    } 
}); 

Eine schlechte Antwort, dies in dem Konsolenprotokoll gedruckt wird:

[jquery.form] state = uninitialized 
"NetworkError: 404 NOT FOUND - http://server/fileupload/" 
[jquery.form] state = loading 
[jquery.form] isXml=false 
in ajaxForm success 
bad or empty response 
[jquery.form] aborting upload... aborted 
in ajaxForm error 
in ajaxForm complete 
in ajaxForm complete 

Ich weiß nicht, warum der ‚vollständig‘ Rückruf zweimal ausgeführt wird - anyone? Eine letzte Sache, lesen Sie this thread, wenn Sie fragen, warum jQuery oder das Form-Plugin nicht nur die HTTP-Header des Iframe lesen kann.

Answer 4

Für alle diese noch benötigen, ist dies ein Weg, um es zu bekommen

function submitForm() 
{ 
    var isSuccess = false, 
     options = { 
      url   : "posturl.php", 
      type  : 'POST', 
      dataType : 'json', 
      success:function(msg) { 
       //set the variable to true 
       isSuccess = true; 

       //do whatever 
      }, 
      complete: function() { 
       if (isSuccess === false) { 
        //throw the error message 
       } 
      } 
     }; 

    //Ajax submit the form 
    $('#your_form').ajaxSubmit(options); 

    // always return false to prevent standard browser submit and page navigation 
    return false; 
} 

Answer 5

JQuery Formular Plugin übernehmen die Server-Antwort status (Code 200) zu arbeiten, ich denke, dass Informationen genug ist.

Von dass Sie erstellen können Sie Antwortstatus Server-Seite

  return $this->returnJson(array(
       'response' => 'success',//error or whatever 
       'data' => 'Succesfully saved in the database' 
      )); 

natürlich returnJson eine Funktion ist, die JSON-Daten zu senden (Sie können einen bauen oder in Ihrer Methode tun)

im Frontend auf Erfolgs-Handle (wird ausgelöst, wenn die Antwort 200 ist) müssen Sie nur Ihr Statusfeld (in diesem Fall 'Antwort'), Beispiel unten überprüfen: