使用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調用之前被調用，並且結果應該附加到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 () { ...

運行此代碼將引發錯誤：

未捕獲到的TypeError：在Function.jQuery的build.Params（jquery.js：8417）的add（jquery.js：8430）在HTMLFormElement的Function.ajax（jquery.js：8450）處非法調用。 （submitdeb.js：45）在HTMLFormElement.dispatch（jquery.js：5206）在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時，默認情況下會執行此操作。

瀏覽器將在內部處理序列化