NodeJS + Express mit Ajax

Question

Ich schreibe ein Web-Dienstprogramm, das eine Datei und einige Formularfelder über Ajax übermittelt. Es gibt einen Teil meines Formulars, der dynamisch ist, da er mehrere Zeilen für denselben Wert enthalten kann. Der Benutzer kann beliebig viele Zeilen hinzufügen. Das Formular nimmt auch eine Datei auf.

Die HTML endet als etwas zum Effekt von bis:

<form id="main-form"> 
    <input name="inputField[0]" type="text"></input> 
    <input name="inputField[1]" type="text"></input> 
    <input name="inputField[2]" type="text"></input> 
    <input name="inputField[3]" type="text"></input> 
    .... 
    <input name="inputField[i]" type="text"></input> 
    <input type = "file" name="file></input> 
</form> 

Auf die Senden-Schaltfläche geklickt wird, wird die folgende Ajax genannt wird:

var mainForm = $("#main-form"); 
$.ajax({ 
     url: '/', 
     type: 'POST', 
     success: successHandler, 
     data: mainForm.serialize(), 
     complete: checkError, 
     cache: false, 
     processData: false 
    }); 

Hier ist das Problem. Ich stecke jetzt in einer Art Catch-22 fest. Die empfohlene Methode zum Übergeben von Dateien über Ajax ist das Verwenden des FormData-Objekts. Das Problem ist, dass ich FormData nicht dazu bringen kann, mit meinen Arrays zu kooperieren. Wenn der NodeJS-Server die Ajax-Übermittlung als FormData-Objekt empfängt, spielt es nicht gut mit den Formular-Arrays. Er behandelt sie als einzelne Eingabefelder wie (console.log (request.body)):

{ normalField: 'normalResult', 
    'inputField[0]': 'test0', 
    'inputField[1]': 'test1', 
    'inputField[2]': 'test2', 
    'inputField[3]': 'test3', 
} 

wo als die .serialize() -Methode mir eine schöne Auswahl gibt wie:

{ normalField: 'normalResult', 
    inputField: 
    [ 'test1', 
    'test2', 
    'test3', 
    'test4' ] 
} 

aber. serialize() funktioniert nicht mit Dateiübertragungen.

Also frage ich mich, was der beste Weg, dies zu unterstützen. Meine Anforderungen sind, dass das Formular die Seite bei der Einreichung nicht verlassen kann, also fühlte ich, dass Ajax der richtige Weg war.

Gibt es eine Möglichkeit für FormData, gut mit Eingabearrays und NodeJS Express zu spielen? Oder irgendeine Art von Arbeit dafür? Ich würde wirklich lieber keine Art von String Finagling machen müssen, wenn .serialize() es so schön macht.

Answer 1

Vielleicht nicht die Antwort, die Sie suchen, aber ich denke, es ist Ihr Problem lösen könnte:

einfach das Objekt ändern, die Sie auf dem Server empfangen:

{ 
    'inputField[0]': 'test0', 
    'inputField[1]': 'test1', 
    'inputField[2]': 'test2', 
    'inputField[3]': 'test3', 
} 

, was Sie wollen (Mainform sein der Name des Objekts von dem Client gesendet wird):

var inputField = []; 

for (var val in mainForm) { 
    inputField.push(mainForm[val]); 
} 

das Array inputfield enthält nun die Werte in das richtige Format (Konsole.log (inputfield)):

['test0', 'test1', 'test2', 'test3']; 

Fiddle: https://jsfiddle.net/00ocdujy/3/

Answer 2

Es sieht aus wie Sie verwenden jQuery, so empfehle ich folgendes Plugin:

http://jquery.malsup.com/form/

1. Einfach mit einschließen:

   • <script src="http://malsup.github.com/jquery.form.js"></script>

2. Verwenden Sie die folgende Methode:

   • $('#main-form').ajaxForm(function() {

Überprüfen Sie den Link, um weitere Informationen über sie