javascript - ajax 请求中的 formdata 返回 Uncaught TypeError : Illegal invocation error

Question

我不明白为什么在尝试发送此 Ajax 请求时会收到 Uncaught TypeError: Illegal inspiration 错误

代码:

$( "#order_button" ).on( "click", function() {
    var name = $('#name').val();
    var email = $('#email').val();
    var address = $('#address').val();
    var co_address = $('#co_address').val();
    var city = $('#city').val();
    var image = $('#fileInput').prop('files')[0];

   updateDB(name, email, address, co_address, city, image);
});

    //update database with posted values
    function updateDB(name, email, address, co_address, city, image){
        var formData = new FormData();

        formData.append('image', image);
        formData.append('name', name);
        formData.append('email', email);
        formData.append('address', address);
        formData.append('co_address', co_address);
        formData.append('city', city);

        console.log(formData['name']);

        var data = {
            action: 'det_lilla_extra',
            formData: formData
        };

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function (data) {
                console.log("success: " + data);
                $('.block-center').append('<i class="fa fa-check fa-4x" aria-hidden="true">');
                //clearInputfields();
                //successMessage();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("jqXHR: " + jqXHR);
                console.log("textStatus: " + textStatus);
                console.log("errorThrown: " + errorThrown);
            }
        });
    }

另外为什么console.log(formData['name']);记录undefined？。我知道这里有一些我不理解的更伟大的事情。

如果我添加 processData: false 然后我会收到一条成功消息。但在我的 php 脚本中，我执行了 var_dump($_POST)。但什么也没显示!

编辑:

我的代码现在看起来像:

//update database with posted values
function updateDB(name, email, address, co_address, city, image){
    var formData = new FormData();

    formData.append('action', 'det-lilla-extra');
    formData.append('image', image);
    formData.append('name', name);
    formData.append('email', email);
    formData.append('address', address);
    formData.append('co_address', co_address);
    formData.append('city', city);

    console.log(formData['name']);

    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'POST',
        dataType: 'json',
        data: formData,
        processData: false,
        success: function (data) {
            console.log("success: " + data);
            $('.block-center').append('<i class="fa fa-check fa-4x" aria-hidden="true">');
            //clearInputfields();
            //successMessage();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("jqXHR: " + jqXHR);
            console.log("textStatus: " + textStatus);
            console.log("errorThrown: " + errorThrown);
        }
    });
}

我的 php 脚本很简单:echo var_dump($_POST);。

但是我收到的 ajax 文件只是 0 为什么会这样？

Answer 1

首先，formData['name']无法工作。 FormData 不提供任何特殊的订阅支持，因此您只需访问对象的属性 - 其中恰好没有名称。您可以使用 FormData.get()

其次，你所做的事情毫无意义。您将 FormData 对象放入一个作为 data 传递给 jQuery 的对象中。默认情况下，即如果您未将 processData 设置为 false，jQuery 将尝试将 data 转换为字符串。您告诉它将给定对象转换为 JSON (dataType: 'json')。但这是不可能的。试试这个:

var formData = new FormData();
formData.append('test', 'abc');
JSON.stringify(formData);

这将为您提供一个空对象:{}。这也可能是您收到此错误的原因。

您必须将所有数据作为纯 JavaScript 对象传递给 jQuery 并让它序列化为 JSON，或者将所有数据放入 FormData 对象中。

例如

var formData = new FormData();

formData.append('image', image);
formData.append('name', name);
formData.append('email', email);
formData.append('address', address);
formData.append('co_address', co_address);
formData.append('city', city);
formData.append('action' 'det_lilla_extra');  // Note this line

// Note that I removed your wrapper object

$.ajax({
    url: '/wp-admin/admin-ajax.php',
    type: 'POST',
    dataType: 'json',
    data: formData,  // Note this change
    processData: false,  // Don’t forget this one