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

所以我有一个表单。当提交这个表单时，我想以一种后端“可读”的方式重新格式化它。在这个例子中，我有一个调查。我想一般的结构是这样的：在提交之前捕捉表单并更改json的结构

{ 
    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，并且接下来的两个问题进行解答

如何在发送到后端之前修改表单的输出以符合上述格式？

来源

2014-01-29 corvid

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

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

经历的形式和它的输入，并将它们映射到您想要的特定结构（这是什么样子，你将不得不做，根据您的样本目标结构），
使用.serializeArray()然后将“名称”值转换为键，并将“值”值转换为。。。呃。。。值。 :)下面是一些代码，将做到这一点：Convert form data to JavaScript object with jQuery

最后，它看起来像你需要使用第一种方法，使用该放值从形式到“问题自定义函数/回答“你正在寻找的结构。。。东西沿此线（有点伪-Y，因为我看不到你的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结构，但是这应该给你一个你正在寻找的一般方法。

来源

2014-01-29 17:29:04 talemyn

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

回答

相关问题