FormData erhält Uncaughted Typ Fehler

Question

Ich mache eine Formularübermittlung durch AJAX mit jQuery. Ich habe den folgenden Code:

$("#myForm-form").on("submit", function(event) { 
    event.preventDefault(); 
    var formData = new FormData($(this)[0]); 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     data: { 
      'eoss': 'indexEOSS', 
      'form': 'myForm', 
      'values': createJSON(), 
      'formData': formData 
     }, 
     success: function(data) { 
      console.log(data); 
      eval(data); 
      myFormForm(data); 
     }, 
     processData: false, 
     contentType: false 
    }); 
    return false 
}); 

Jedoch habe ich diese:

GET http://localhost/EOSS2/request.php?[object%20Object] 404 (Not Found)

Wenn ich entfernen processData: false und contentType: false ich die folgende Fehlermeldung erhalten:

Uncaught TypeError: Illegal invocation

Was soll ich tun?

Answer 1

Sie haben hier zwei Probleme. Zuerst zeigt Ihre Fehlermeldung an, dass Sie eine GET-Anfrage senden, die nicht mit FormData funktioniert. Die Verwendung von POST scheint in diesem Fall am besten zu sein.

Zweitens können Sie FormData nicht in einem Objekt senden, da jQuery versucht, die URL zu verschlüsseln, was zu Problemen führen wird. Verwenden Sie stattdessen die Methode append(), um Informationen zu Ihrem Objekt FormData hinzuzufügen. Versuchen Sie Folgendes:

$("#myForm-form").on("submit", function(e) { 
    e.preventDefault(); 

    var $form = $(this); 
    var formData = new FormData($form[0]); 
    formData.append('eoss', 'indexEOSS'); 
    formData.append('form', 'myForm'); 
    formData.append('values', createJSON()); 

    $.ajax({ 
     url: $form.attr('action'), 
     type: $form.attr('method'), // change the attribute in HTML or hardcode to 'post' 
     data: formData, 
     success: function(data) { 
      console.log(data); 
      // eval(data); < never, ever use eval() 
      myFormForm(data); 
     }, 
     processData: false, 
     contentType: false 
    }); 
});