【JavaScript】「formをjsonにしてpost」する。

formをjsonにしてpostしたい

英単語ばかりで気持ち悪い。

とりあえず、こんなhtmlがあるとする。

sample.html

<form action="dummy" accept-charset="UTF-8" method="post">
    <input type="text"   name="hoge"></input>
    <input type="text"   name="fuga"></input>
    <input type="submit" name="submit"></input>
</form>

これを以下のようなjson形式でpostしたい。

sample.json

{
  "hoge": "aaa",
  "fuga": "bbb"
}

①serializeArray()を使う

まず、jQueryで用意されてるserializeArray()を使う。

sample.js

$('form').submit(function(){
  var data = $('form').serializeArray();
}

すると、以下のようなjsonが返却される。

output.json

[
  {
    "name":  "hoge",
    "value": "aaa"
  }, {
    "name":  "fuga",
    "value": "bbb"
  }
]

②欲しい形にparseする

上記のJSONのままだと要件に満たないので、要件と満たすように変換する関数を作成する。

sample.js

$('form').submit(function(){
  var data = $('form').serializeArray();
  data = parseJson(data);  // 作成した以下の関数を呼び出す
}

// ②変換関数：json to 欲しい形
var parseJson = function(data) {
  var returnJson = {};
  for (idx = 0; idx < data.length; idx++) {
    returnJson[data[idx].name] = data[idx].value
  }
  return returnJson;
}

③最終形(ajaxを使って送信)

sample.js

$('form').submit(function(){
  var data = $('form').serializeArray();  // ①form to json
  data = parseJson(data); // ②json to 欲しい形
  // ③送信
  $.ajax({
    type:          'post',
    dataType:      'json',
    contentType:   'application/json',
    scriptCharset: 'utf-8',
    data:          JSON.stringify(data)
  })
}

// ②変換関数：json to 欲しい形
var parseJson = function(data) {
  var returnJson = {};
  for (idx = 0; idx < data.length; idx++) {
    returnJson[data[idx].name] = data[idx].value
  }
  return returnJson;
}

以上。

serializeArray()使ったり、stringify()使ったりで、何が何やらって感じになってしまった。
上手く出来る人いたら教えてください。