如何将一个空数组添加至FormData对象中？

Question

我有以下问题:

一个HTML表单中有N个复选框，使用FormData将其信息发送请求通过Ajax。在PHP中，$_POST['teste']变量不存在...

<form id="teste_form">
    <input type="checkbox" name="teste[]">
    <input type="checkbox" name="teste[]">
    <input type="checkbox" name="teste[]">
    <input type="checkbox" name="teste[]">...
</form>

<script>
    var form_data_obj = new FormData( document.getElementById('teste_form') );
    $.ajax({
        ...
        data: form_data_obj
        ...
    });
</script>

我知道我可以在PHP中使用 "if(isset(...))"，但我真的不喜欢那种解决方案。对我来说，最好的解决方案是从FormData对象发送一个空数组到PHP。

注意：我尝试了一些东西，例如：

form_data_obj.append('teste[]', undefined). form_data_obj.append('teste[]', 0).

但没有成功......在PHP上的结果分别是：["undefined"]，["0"]

我想在PHP中得到$ _POST ['test'] = []

这是否可能？

- Doglas

---

我更愿意在表单字段名称中指定索引...这样你就能确切地知道哪个“位置”属于哪个已选中的值。如果你在PHP中遍历数组，那么“缺失”的索引并不是一个真正的问题。 - CBroe

Answer 1

Smells like this: 如何将空数组从HTML表单发布到PHP 解决方法：您可以在客户端使用带有空值的隐藏输入元素，并在服务器端进行空值检查。像这样的内容：

var appended = null;
$('.confirm_appointment').submit(function(e) {

  if (appended !== null) appended.remove();
  /************************************/
  if ($("input[name='teste[]']:checked").length == 0) {
    appended = $("<input type='hidden' name='teste[]' value=''>").appendTo($(this));
  }
  /************************************/

  e.preventDefault();
  $(this).append(decodeURIComponent($(this).serialize()) + '<br />');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='confirm_appointment' method='post' class='confirm_appointment'>
  <input type='checkbox' name="teste[]" value='hello1' />
  <input type='checkbox' name="teste[]" value='hello2' />
  <input type='checkbox' name="teste[]" value='hello3' />
  <input type='checkbox' name="teste[]" value='hello4' />
  <input type='submit' class='update_appointment_button' value='submit' /><br />
</form>

而在 PHP 方面：

$teste = array_filter($_POST["teste"]);

- Taha Paksu

---

隐藏的空值输入框对我帮助很大，它值得点赞。但是我正在寻找的解决方案是使用JS，类似于form_data.append('test', [])并在PHP中接收，无需处理，$_POST['test'] = []。 - Doglas

更新了我的回答。 - Taha Paksu

Answer 2

即使没有jQuery，这也是完全可能的。

yourFormData.append('key', []);

- Niels

---

PHP错误：array_filter（）期望参数1为数组，但提供了字符串... 即便如此，我的PHP代码是通用的。在确定无法通过FormData发送空数组之前，我不想更改它。 - Doglas

这与PHP无关。表单数据中的空数组会导致一个空字符串，可以在开发者工具的网络选项卡中看到。 - phil294

它将字符串附加为“[]”，而不是空数组。 - Sunny

Answer 3

经过几天的尝试，我认为以下方法是最佳选择：

如果您可以发送 null，则应执行此操作：

yourFormData.append('key', '');

但是，如果您的 key 不可为空，则需要使用 axios 或 fetch api 发送另一个请求与 formData 一起发送。例如：

let {data} = await axios.post('url',yourFormData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
          Accept: 'application/json',
        },
      });
await axios.patch('url',{id:data.id,yourKey:[]});

- Ali Afzali

Answer 4

我不知道这是否相关，但对于我的实现，以下内容非常有效。在定义空数组之后，它必须通过物理方式循环遍历实际数组，以便递归地声明对象以满足对象和子数组等...

formData.append(key + '[]', []);

因此，在原地使用，整个 FormData 构建如下所示...

/* ............................................................ */
/* .........runPostFetchScripts Can be used throughout [AF].... */
function runPostFetchScripts(id, str) {
    // Try and break out any scripts that need to also be run from the newly acquired HTML body (these don't naturally get run)...
    // Find ALL script tags (most basic form ONLY for now)...
    //console.log(str);
    scripts = str.split('<sc' + 'ript>');
    // First element will be content, so remove it
    if(scripts.length > 1) {
        scripts.splice(0, 1);
        one_biggy = "";
        for(i = 0; i < scripts.length; ++i) {
            // Then get rid of following content after end of script tag
            scripter = scripts[i].split("</sc" + "ript>");
            // And run what is left...
            //console.log(i + ": " + scripter[0]);
            one_biggy += scripter[0];
        }
        //console.log(one_biggy);
        eval(one_biggy);
    }
    // Phew!  This took way longer than expected [AF]!
}

/* ............................................................ */
/* .........New inclusion for FormData Validation and addition of Files, Multiple Files and Arrays to Form uploads via Ajax.... */
function genericBuildFormData(formData, data, previousKey) {
    /*
    console.log("genericBuildFormData(");
    console.log(formData);
    console.log(data);
    console.log(previousKey);
    //*/
    if(data instanceof File) {
        //console.log(previousKey + " file append...");
        formData.append(previousKey, data);

    } else if (data instanceof Object) {
        var keys = Object.keys(data);
        for(var k = 0; k < keys.length; ++k) {
            var key = keys[k];
            var value = data[key];
            /*
            console.log(k + " " + key);
            console.log(!(value instanceof File));
            console.log(value instanceof Object);
            console.log(!(Array.isArray(value)));
            console.log(value);
            //*/
            if(previousKey != '') {
                key = previousKey + '[' + key + ']';
            }
            if (!(value instanceof File) && (value instanceof Object) && !(Array.isArray(value))) {
                //console.log("Is Object, go again... " + key + "[]");
                formData.append(key + '[]', []);
                genericBuildFormData(formData, value, key);
            } else {
                if (Array.isArray(value)) {
                    //console.log(key + " is Array...");
                    // Define empty array first...
                    formData.append(key + '[]', []);
                    // Now loop through all array contents, accounting for embedded objects and sub-arrays...
                    for (var a = 0; a < value.length; ++a) {
                        //console.log(a);
                        genericBuildFormData(formData, value[a], key + '[' + a + ']');
                    }
                } else {
                    //console.log(key + " append...");
                    formData.append(key, value);
                }
            }
        }
    } else {
        //console.log(previousKey + ": " + data + " append...");
        formData.append(previousKey, data);
    }
}
/* ............................................................ */
/* .............genericAjaxCall Can be used throughout [AF].... */
function genericAjaxCall(GetPost, FullUrl, PostParams, Container, id, callback) {
    /*
    console.log("genericAjaxCall(...");
    console.log(FullUrl);
    console.log(PostParams);
    console.log(Container);
    console.log(id);
    //*/
    var GET_POST = GetPost.toUpperCase();
    var jacks = {
        url: FullUrl,
        type: GET_POST,
        async: true,
        processData: false, // Due to contentType, assume WE have got the data right, so do not allow AJAX to find fault with what we have done (files and arrays will fail otherwise) [AF]
        contentType: false, // Let Ajax work this out for us seeing as we are going to be mixing arrays, objects and files as well as primitives, so don't tell it anything [AF]
        success: function(strResult) {
            populateContainer = (Container ? document.getElementById(Container) : false);
            //console.log(populateContainer);
            if(populateContainer) {
                //populateContainer.innerHTML = ""; // To drop possible scroll values
                populateContainer.innerHTML = strResult;

                //console.log(strResult);
                if(callback != null) {
                    window.setTimeout(function() {
                        callback(id, strResult);
                    }, 100);
                }
            } else {
                //console.log("ajax.strResult: " + FullUrl + " " + id + " = " + strResult);
                if(callback != null) {
                    window.setTimeout(function() {
                        callback(id, strResult);
                    }, 100);
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            populateContainer = document.getElementById(Container);
            if(populateContainer) {
                populateContainer.innerHTML = "Error: " + textStatus + " - " + errorThrown;
            } else {
                if(callback != null) {
                    window.setTimeout(function() {
                        callback(id, null, 'Error: ' + textStatus + ' - ' + errorThrown);
                    }, 100);
                } else {
                    console.log('Error: ' + textStatus + ' - ' + errorThrown);
                }
            }
        }
    };
    if(GET_POST == "POST") {
        //console.log(PostParams);
        // Use FormData for File Upload inclusion
        var myFormData = new FormData();
        genericBuildFormData(myFormData, PostParams, '');
        jacks.processData = false;
        jacks.contentType = false;
        jacks.data = myFormData;
    }
    //console.log(jacks);
    $.ajax(jacks);
}

而调用代码看起来像这样（它是递归的，因此在考虑发送到genericBuildFormData函数的参数时请记住）...

var myFormData = new FormData();
genericBuildFormData(myFormData, PostParams, '');

在 Chrome 的 "网络标头" 中查看提交时，生成的数据大致如下...

additional[]: 
additional[0]: null
additional[1][id]: 7715
additional[1][ex]: Permanent Exclusion
additional[1][mi]: 1
additional[2]: null
additional[3]: null
additional[4]: null

...其中数组元素0、2、3、4为空，元素1是一个嵌入式对象。

希望这可以帮助到您。Shalom。

- Andrew Foster