FormData 获取未捕获的类型错误

Question

我正在使用 jQuery 通过 AJAX 提交表单。我有以下代码：

$("#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
});

但是我得到了这个：

GET http://localhost/EOSS2/request.php?[object%20Object] 404（未找到）

当我删除 processData: false 和 contentType: false 时，我收到以下错误：

未捕获的类型错误：非法调用

我该怎么办？

Answer 1

这里有两个问题。首先，您的错误消息表明您正在发送一个 GET 请求，该请求不适用于 FormData。在这种情况下，使用 POST 似乎最适用。

其次，您不能在对象中发送FormData，因为 jQuery 会尝试对其进行 URL 编码，这会导致问题。而是使用append() 方法将信息添加到您的FormData 对象。试试这个：

$("#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
    }); 
});