jQuery serializeArrayメソッドで画面からJSONの配列を作成するサンプル

2022年11月14日

環境
jquery 3.6.0
Google Chrome 107.0.5304.107

構文
1.JavaScriptオブジェクトを生成します
const 変数名 = $(“#フォームのid名").serializeArray();
serializeArrayは、jQueryのメソッドで画面のテキストボックス等のnameとvalueからJavaScriptのキーと値のオブジェクトを生成します。
2.stringifyメソッドでオブジェクトをjsonの配列のキーとvalueを生成します
JSON.stringify(変数名);

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのajaxのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$( function() {
  
  $("#btnchg").click(function(){
     //JavaScriptオブジェクトを生成
     const obj = $("#formcity").serializeArray();
     console.log(obj);
     
     // JSONの配列のキーとvalueになります
     const result = JSON.stringify(obj);
     $("#show").text(result);
  });
});
</script>
</head>
<body >
<p>値　<span id="show"></span></p>
<form id="formcity">
 名前: <input type="text" value="山田" name="user" size="5" maxlength="5" /><br/>
 都市: <input type="text" value="東京" name="city" size="5" maxlength="5" />
  <p><input type="button" id="btnchg" value="表示" /></p>
</form>
</body>
</html>

実行結果
「表示」ボタンを押すと、画面に「値　[{“name":"user","value":"山田"},{“name":"city","value":"東京"}]」が表示されます。
コンソールに下記メッセージが表示されます。

[
    {
        "name": "user",
        "value": "山田"
    },
    {
        "name": "city",
        "value": "東京"
    }
]

jQuery

Posted by arkgame

関連記事: