Cacher is the code snippet organizer for pro developers

<!--
入力された全ての Element をURLエンコードencodeURIComponentされたクエリ文字列にシリアライズします。 
シリアライズされるフォーム要素は name 属性を持っている必要があります。
チェックボックスとラジオボタンはチェックされている場合にのみシリアライズされる文字列に含まれます。
以下のHTMLフォームでシリアライズ結果を確認します。
-->
<form action="send">
  <input type="text" name="user" placeholder="ユーザー名"><br>
  <input type="radio" name="gender" value="male" checked="checked">男
  <input type="radio" name="gender" value="female">女<br>
  <select name="single">
    <option>東京</option>
    <option>神奈川</option>
    <option>千葉</option>
  </select><br>
  <input type="text" name="url" placeholder="サイトURL"><br>
  <button type="submit" name="action" value="send">Submit</button>
</form>

//シリアライズ結果は以下の通り

$(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    console.log($(this).serialize());
  });
});

// シリアライズ結果
user=tasukujp&gender=male&single=%E6%9D%B1%E4%BA%AC&url=http%3A%2F%2Fwww.task-notes.com

// ※serialize自体は<input> <textarea> <select> <keygen>などの復数のフォーム要素を選択した jQuery オブジェクトに適用することもできますが、
//<form>を選択するほうが一般的に容易
console.log($('input, select').serialize());

// 特定の要素だけを指定することも可能
user=tasukujp&gender=male&single=%E6%9D%B1%E4%BA%AC&url=http%3A%2F%2Fwww.task-notes.com

/*
serializeArrayはserializeでURLエンコードしてクエリ文字列に連結する前のデータを作成する関数になります。
つまり、戻り値のデータ構造が違うだけで内容は同じものです。
こちらの場合は配列に要素の name と value で構成されるオブジェクトが格納されて返却されます。
*/

$(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    console.log(JSON.stringify($(this).serializeArray()));
  });
});

// シリアライズ結果をJSON文字列に変換
[{"name":"user","value":"tasukujp"},{"name":"gender","value":"male"},{"name":"single","value":"東京"},{"name":"url","value":"http://www.task-notes.com"}]

// 「JSON.parse()」の使い方

var obj = {
    name: '太郎',
    age: 30,
    area: 'Tokyo'
}
 
// オブジェクトデータをJSON化
var json = JSON.stringify( obj );
 
console.log( json.name );

//実行結果
undefined  //→文字列データのJSONにオブジェクトのようなアクセスはできない

-------------------------------------------------------------------------

var obj = {
  name: '太郎',
  age: 30,
  area: 'Tokyo'
 }
// オブジェクトデータをJSON化
 var json = JSON.stringify( obj );
 
 // JSONを再びオブジェクトデータの形式に変換
 json = JSON.parse( json );
 console.log( json.name );
 
//実行結果
太郎

//「JSON.parse()」の引数にJSONデータを指定することで、オブジェクトデータに変換している。
// 「undefined」だったのが今度は「太郎」という値が出力されている。

参考URL：
https://www.task-notes.com/entry/20160715/1468512515「【jQuery】serializeとserializeArray関数の使い方」
https://www.sejuku.net/blog/47716「【JavaScript入門】JSONの作成とparse() / stringify()の使い方！」