javascript - 使用 jQuery FormData.append 将值附加到 $_POST 数组

Question

我有一个简单的 HTML 表单，在此表单中有一个部分，用户可以在其中选择一个或多个复选框。我编写了一个 JS 函数，它获取每个复选框的值并将其放入字符串中:

function getSupportedDevices() {
    var supportedDevices = "";
    $('.devices:checkbox:checked').each(function () {
        let sThisVal = $(this).val();
        supportedDevices += sThisVal + ";";
    });
    console.log(supportedDevices);

    return supportedDevices;
}

此函数在 Ajax 调用之前调用，结果应为 appended to the FormData以便我稍后可以使用该字符串。这是我尝试添加列表的代码:

var $debForm = $('#formDeb');
if ($debForm.length > 0) {
    $debForm.on('submit', function (event) {
        event.preventDefault();

        if (!isSubmitting) {
            let $form = $(this);
            let targetUrl = $form.attr('action');
            let method = $form.attr('method');
            let $btnSubmit = getElement($form, '.js-btn-submit');

            var myFormData = new FormData(this);
            var supportedDevices = getSupportedDevices();
            myFormData.append("supportedDevices", supportedDevices);

            $.ajax({
                type: method,
                url: targetUrl,
                data: myFormData,
                async: true,
                beforeSend: function () { ...

运行此代码会引发错误:

Uncaught TypeError: Illegal invocation at add (jquery.js:8430) at buildParams (jquery.js:8417) at Function.jQuery.param (jquery.js:8450) at Function.ajax (jquery.js:9040) at HTMLFormElement. (submitdeb.js:45) at HTMLFormElement.dispatch (jquery.js:5206) at HTMLFormElement.elemData.handle (jquery.js:5014)

第 45 行是 $.ajax。如果我尝试使用 data: new FormData(this).append("supportedDevices", getSupportedDevices()) 作为 ajax 参数，我不会收到错误，但 $_POST 数组为空。

我做错了什么导致出现此错误？生成字符串的函数独立工作，如果我只发送 FormData 而不附加任何内容，则 $_POST 数组不为空。

Answer 1

设置 processData:false 以防止 $.ajax 尝试使用 $.param() 序列化 FormData 对象(默认情况下)当对象传递给data时。

浏览器将在内部处理序列化