在提交之前捕捉表單並更改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的結構

回答

相關問題