Javascript FormData附加嵌套对象 <pre><? print_r($_GET) ?></pre> <pre><? print_r($_POST) ?></pre>

是否可以将嵌套对象附加到

FormData

let formData = new FormData();
let data = {
    title: 'title',
    text: 'text',
    preview: {p_title:'p title', p_text: 'p text'}
};

$.each(data, function(key, value) {
    formData.append(key, value);
});

<pre><? print_r($_GET) ?></pre>
<pre><? print_r($_POST) ?></pre>

服务器控制台-console.log（请求正文）

---

如何获取

预览：{p_title:'p title'，p_text:'p text'}

？

表单数据

值自动转换为

字符串

。您可以尝试使用

或者使用

JSON.stringify（obj）

将其作为字符串

这是一个“将对象转换为FormData实例的方便JavaScript函数”，也可以作为一个简单易用的

let data = {
    title: 'title',
    text: 'text',
    preview: {p_title:'p title', p_text: 'p text'}
};

var formData = objectToFormData(data);

---

要将对象附加到formData，首先需要将其字符串化，如下所示：

let objToAppend= {
  key1: value1,
  key2: value2,
}
let formData = new FormData();
formData.append('obj', JSON.stringify(objToAppend));

然后在服务器端，要访问它，您需要首先使用

JSON.parse（）

解析它。 希望有帮助

let formData = new FormData();
let data = {
  title: 'title',
  text: 'text',
  preview: {p_title:'p title', p_text: 'p text'}
};

for(let dataKey in data) {
  if(dataKey === 'preview') {
    // append nested object
    for (let previewKey in data[dataKey]) {
      formData.append(`preview[${previewKey}]`, data[dataKey][previewKey]);
    }
  }
  else {
    formData.append(dataKey, data[dataKey]);
  }
}

控制台窗体数据

for (let val of formData.entries()) {
  console.log(val[0]+ ', ' + val[1]); 
}

试试看。它是一个方便的JavaScript函数，可以将对象转换为FormData实例

从'object to formdata'导入{objectToFormData}；
常量对象={
/**
*键值映射
*值可以是基本体或对象
*/
};
常量选项={
/**
*在FormData键中包含数组索引
*默认为false
*/
指数：假，
/**
*将空值视为未定义的值并忽略它们
*默认为false
*/
nullsasunfineds:false，
/**
*将true或false分别转换为1或0
*默认为false
*/
布尔整数：false，
};
const formData=objectToFormData(
对象
选项，//可选
existingFormData，//可选
keyPrefix，//可选
);
console.log（formData）这是我要做的工作：

使用
分隔键和子键

let formData = new FormData();
let data = {
  title: 'title',
  text: 'text',
  preview: {p_title:'p title', p_text: 'p text'}
};

for(let key in data) {
  if(typeof(data[key]) === 'object') {
    for (let subKey in data[key]) {
      formData.append(`${key}.${subKey}`, data[key][subKey]);
    }
  }
  else {
    formData.append(key, data[key]);
  }
}

您不需要使用任何第三方模块，
JSON.stringify（）。相反，您可以使用
Object.entries（）

阅读更多关于
Object.entries（）
的信息-
使用hashName[keyName]

let formData = new FormData();
let data = {
  title: 'title',
  text: 'text',
  preview: {p_title:'p title', p_text: 'p text'}
};

for(let key in data) {
  if(typeof(data[key]) === 'object') {
    for (let subKey in data[key]) {
      formData.append('${key}[${subKey}]', data[key][subKey]);
    }
  }
  else {
    formData.append(key, data[key]);
  }
}

首先，我为我的英语不好道歉

我做了一些事情来在服务器端正确地获取数据，而不是在写入控制台时。我希望你想这样做

我必须编写一个javascript函数来获取服务器端的客户端嵌套数据

为此，我编写了obj2FormData（）函数。方括号似乎有效

function obj2FormData(obj, formData = new FormData()){

    this.formData = formData;

    this.createFormData = function(obj, subKeyStr = ''){
        for(let i in obj){
            let value          = obj[i];
            let subKeyStrTrans = subKeyStr ? subKeyStr + '[' + i + ']' : i;

            if(typeof(value) === 'string' || typeof(value) === 'number'){

                this.formData.append(subKeyStrTrans, value);

            } else if(typeof(value) === 'object'){

                this.createFormData(value, subKeyStrTrans);

            }
        }
    }

    this.createFormData(obj);

    return this.formData;
}

使用Ajax发送数据时，我们将嵌套对象转换为FormData对象

let formData = obj2FormData({
    name : 'Emrah',
    surname : 'Tuncel',
    birth: 1983,
    child : {
        name: 'Eylul',
        surname: 'Tuncel',
        toys: ['ball', 'baby']
    },
    color: ['red', 'yellow']
});

现在，让我们发送用ajax转换的FormData

const xhr = new XMLHttpRequest();
xhr.addEventListener('load', response => {
    //AJAX RESPONSE >>

    console.log(response);

    //AJAX RESPONSE //
});
xhr.open('POST','response.php');
xhr.send(formData);

当我用PHP将数据按到屏幕上时，我得到了我想要的确切结果。方法是POST还是GET并不重要

response.php

希望它能为您的业务带来好处。
添加了snippet@ShibinRaghWhy您会将其转换为Blob吗？只需将JSON作为字符串发送，就不会通过将其作为多部分二进制发送而赢得任何东西，因为它不是二进制数据。当值为文件时不起作用。您真的需要服务器端的这种结构吗？在这种情况下，您必须遍历对象并使用
key[subkey]
符号，例如
formData.append（'preview[p_title]，'p title'）。但除此之外，只需将其作为JSON字符串发送并解析到服务器端，通常是最简单的发送和检索方式。事实上，我在后端编码方面是新手，我的mongodb结构是嵌套的，因此我从clientside选择此结构来发送数据，我认为这是正确的方式，我认为最简单的方法是，在我发送到db@kaidoit is FormData之前，不要尝试从客户端传递嵌套结构，而只是从服务器重新构造，你们已经写过了FormDate@ustaad嘿，谢谢你提醒我。我已经更新了它。当value是一个文件时不起作用。将一个文件作为value
JSON.stringify
对我不起作用，这确实起作用了。
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', response => {
    //AJAX RESPONSE >>

    console.log(response);

    //AJAX RESPONSE //
});
xhr.open('POST','response.php');
xhr.send(formData);

<pre><? print_r($_GET) ?></pre>
<pre><? print_r($_POST) ?></pre>

Array
(
    [name] => Emrah
    [surname] => Tuncel
    [birth] => 1983
    [child] => Array
        (
            [name] => Eylul
            [surname] => Tuncel
            [toys] => Array
                (
                    [0] => ball
                    [1] => baby
                )

        )

    [color] => Array
        (
            [0] => red
            [1] => yellow
        )

)