Question

所以我有一张表格。提交此表单时，我想以后端“可读”的方式重新格式化它。在这个例子中，我有一个调查。我希望通用结构如下：

{
    survey_id: (string),
    responses:
    [
        {
            question: (String)
            answers: [ (String), ... ]
        },
        ...
    ]
}

我使用此函数在提交表单之前捕获表单并记录它：

submitSurvey : function( delay ) {
  $('#surveyForm').submit(function(e) {
    e.preventDefault();
    console.log(JSON.parse(JSON.stringify($(this).serializeArray())));
  });
});

但是，当我提交表单时，它看起来像这样：

[{"name":"survey_id","value":"6"},
{"name":"do you like waffles?","value":"yeah we like waffles"},
{"name":"do you like pancakes?","value":"yeah we like pancakes"}]

第一个是调查本身的ID，接下来的两个是问题及其答案

如何在将表单输出发送到后端之前修改表单的输出以匹配上面指定的格式？

Answer 1

确认我们是否可以看到您的HTML代码会容易一些，但我可以告诉您，基本上，.serializeArray()正在做的只是从表单创建一个名称/值对对象数组以及它的所有输入（在这种情况下，JSON.parse()和JSON.stringify()并没有真正添加任何内容......它们只是将数组转换为字符串然后再次返回数组中。

这种方法对于通常打包表单响应非常有用，但是，如果要创建具有自定义结构的Object，则必须进行一些手动映射以将数据输入你想要的结构。基本上有两种方法可以做到这一点：

浏览表单及其输入，并将它们映射到您想要的特定结构（根据您的示例目标结构，您将不得不这样做），
使用.serializeArray()，然后将“name”值转换为键，将“value”值转换为。。。呃。。。值。 :)以下是一些可以执行此操作的代码：Convert form data to JavaScript object with jQuery

最后，看起来您需要使用第一种方法，使用自定义函数将表单中的值放入您正在寻找的“问题/答案”结构中。。。这有点像（有点伪代码，因为我看不到你的HTML;））：

var data = {};
data.survey_id = **VALUE**;
data.responses = [];

var newQuestion;
for each input {
    newQuestion = {};
    newQuestion.question = **VALUE**;
    newQuestion.answers = [];

    for each answer {
        newQuestion.answers.push(VALUE);
    }

    data.responses.push(newQuestion);
}

同样，您将不得不确定如何处理特定表单输入的逻辑，因为我们无法看到表单的HTML结构，但这应该为您提供您正在寻找的一般方法。

在提交之前捕获表单并更改json的结构

1 个答案: