在AJAX上发送嵌套的FormData

问题描述

我需要使用ajax和FormData发送一些数据，因为我想发送文件和其他一些参数.我通常发送数据的方式是这样的:

I need to send some data using ajax and FormData, because I want to send a file and some other parameters. The way I usually send data is this:

$.ajax({
    type:       'POST',
    url:        'some_url',
    dataType:   'json',
    processData:false,
    contentType:false,
    data:{
        Lvl_1-1: 'something',
        Lvl_1-2: 'something',
        Lvl_1-3: {
            Lvl_1-3-1: "something",
            Lvl_1-3-2: "something",
            Lvl_1-3-3: "something",
        },
    },
    ...
});

如果我不使用FormData()，我没有问题，但是使用FormData()时，只有Lvl1上的数据可以，但是嵌套的任何内容都将显示为这样的字符串

If I don't use FormData(), I have no problem, but when using FormData(), only the data on Lvl1 is ok, but anything nested is displayed as string like this

<b>array</b> <i>(size=3)</i>
    'Lvl1-1' <font color='#888a85'>=&gt;</font> <small>string</small>
        <font color='#cc0000'>'Something'</font>
        <i>(length=23)</i>
    'Lvl1-2' <font color='#888a85'>=&gt;</font> <small>string</small>
        <font color='#cc0000'>''Something''</font> <i>(length=3)</i>
    'Lvl1-3' <font color='#888a85'>=&gt;</font> <small>string</small>
        <font color='#cc0000'>'[object Object]'</font> <i>(length=17)</i>

如果我使用FormData()对Lvl1-3中的数据进行编码，而不是[object Object]，我会得到[object FormData]

If I use FormData() to encode the data inside Lvl1-3, instead of [object Object] I get [object FormData]

如何在Lvl1-3上获取数组而不是字符串?

How do I get an array instead of string on Lvl1-3?

注意:如果文件位于顶层(Lvl_1)，则可以使用FormData()毫无问题地发送文件.我没有编写附加文件的代码，因为这不是问题，嵌套数据是问题.我刚才提到该文件是因为这就是为什么我使用FormData()的原因.

NOTE: If the file is on top level (Lvl_1) I can send the file with no problems using FormData(). I didn't wrote the code of the file attached because that's not the problem, nested data is. I just mentioned the file because that's why I'm using FormData().

推荐答案

URL编码的表单数据没有任何表示复杂数据结构的本地方法.它仅支持简单的key = value对.

URL Encoded form data doesn't have any native way to express complex data structures. It only supports simple key=value pairs.

?foo=1&bar=2

大多数表单数据解析库允许使用具有相同名称的键来数组数据

Most form data parsing libraries allow arrays of data using keys with the same name

?foo=1&foo=2

PHP在该格式之上附加了自己的语法:

PHP bolted its own syntax on top of that format:

?foo[]=1&foo[]=2

允许在关联数组中使用命名键:

which allowed for named keys in an associative array:

?foo[bar]=1&foo[baz]=2

和嵌套数组:

?foo[bar][level2a]=1&foo[bar][level2b]=2

由于PHP的盛行，当您将JavaScript对象传递给data时，jQuery采用了该语法来生成表单数据.

Due to the prevalence of PHP, jQuery adopted that syntax for generating form data when you pass a JavaScript object to data.

如果您想使用FormData，那么jQuery不会为您重新处理它.

If you want to use FormData then jQuery won't reprocess it for you.

您看到的效果是因为您试图将一个对象(我想是一个FormData实例，但是您没有显示代码的那一部分)作为append的第二个参数-其中一个字符串是预期的.

The effect you are seeing is because you are trying to put an object (I'm guessing a FormData instance, but you haven't showed that part of your code) as the second argument to append - where a string is expected.

您需要自己使用PHP的语法生成键名.

You need to generate the key names using PHP's syntax yourself.

form_data_instance.append("Lvl_1-3[Lvl_1-3-1]", "something");
form_data_instance.append("Lvl_1-3[Lvl_1-3-2]", "something");
form_data_instance.append("Lvl_1-3[Lvl_1-3-3]", "something");

这篇关于在AJAX上发送嵌套的FormData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！