logo标签列表

将数组添加到FormData并通过AJAX发送

javascriptajaxarraysform-data
202

我正在使用ajax提交一个包含数组、文本字段和文件的多部分表单。

我将每个VAR追加到主数据中，如下所示

var attachments = document.getElementById('files'); 
var data= new FormData();

for (i=0; i< attachments.files.length; i++){
    data.append('file', attachments.files[i]);
    console.log(attachments.files[i]);

    data.append ('headline', headline);
    data.append ('article', article);
    data.append ('arr', arr);
    data.append ('tag', tag);

然后我使用ajax函数将其发送到一个PHP文件以存储在SQL数据库中。

$.ajax({    
    type: "post",
    url: 'php/submittionform.php',
    cache: false,
    processData: false,
    contentType: false,
    data: data,
    success: function(request) {$('#box').html(request); }
})

但在PHP方面，数组变量arr会显示为字符串。

当我不使用ajax发送它作为表单数据，而是使用简单的$.POST选项时，我确实可以在PHP方面将其作为数组得到，但这样我就无法同时发送文件。

有什么解决办法吗？

16个回答
1
如果您正在使用 django 的 ArrayField，那么您需要像下面的示例一样发送数据。
const form = new FormData();
const value = ["Hello", "World"];
const key = "arr";
let i;
for (i = 0; i < value.length; i++) {
    form.append(key, value[i]);
}
axios.post(url, form).then(res=> console.log(res));
1

我已经修复了TypeScript版本。对于JavaScript，只需删除类型定义。

  _getFormDataKey(key0: any, key1: any): string {
    return !key0 ? key1 : `${key0}[${key1}]`;
  }
  _convertModelToFormData(model: any, key: string, frmData?: FormData): FormData {
    let formData = frmData || new FormData();

    if (!model) return formData;

    if (model instanceof Date) {
      formData.append(key, model.toISOString());
    } else if (model instanceof Array) {
      model.forEach((element: any, i: number) => {
        this._convertModelToFormData(element, this._getFormDataKey(key, i), formData);
      });
    } else if (typeof model === 'object' && !(model instanceof File)) {
      for (let propertyName in model) {
        if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;
        this._convertModelToFormData(model[propertyName], this._getFormDataKey(key, propertyName), formData);
      }
    } else {
      formData.append(key, model);
    }

    return formData;
  }
0
在你有一个元素数组或者一个对象的情况下，你可以简单地使用set方法和JSON.stringify一起将数组转换为字符串，并将该值设置为字符串。要将字符串化的JSON数据转换回正确的数组JSON，设置表单值，在后端转换回有效数组并几乎没有问题。
const bookItems = [
    {
      name: "John Doe",
      age: 21
    }
 ...
];
formData.set("books", JSON.stringify(bookItems));
0

JavaScript 代码：

var formData = new FormData();
let arr = [1,2,3,4];
formData.append('arr', arr);

在php上输出：

$arr = $_POST['arr']; ===>  '1,2,3,4'

PHP代码解决方案：

$arr = explode(",", $_POST['arr']); ===> [1,2,3,4]
这段代码需要一些解释，说明为什么和如何运作，而不只是展示你认为能工作的代码。 - Newbyte
目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
0
JavaScript与TypeScript。 创建一个处理FormData()数据的函数。
function createFormData(formData: FormData, key: string, 
 data: any): void {
  if (typeof data === 'object' && !Array.isArray(data)) {
    for (const prop in data) {
      if (data.hasOwnProperty(prop)) {
        createFormData(formData, `${key}[${prop}]`, data[prop]);
      }
    }
  } else if (Array.isArray(data)) {
    data.forEach((item, index) => {
      createFormData(formData, `${key}[${index}]`, item);
    });
  } else {
    formData.append(key, data);
  }
}

const data = {name:["Shariar","Sheikh"],age:24}
const formData = new FormData()

createFormData(formData,"name",data.name)
createFormData(formData,"age",data.age)
-3

简单方法：

data.map(dt=>formdata.append("name",dt))

我试过了，它完美地运行。

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Cristik
你的答案质量比其他人低得多。 - Zach Jensz
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接