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>

<head>

<title>jqueryのajaxのサンプル</title>

$( 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 >

名前: <input type="text" value="山田" name="user" size="5" maxlength="5" /><br/>

都市: <input type="text" value="東京" name="city" size="5" maxlength="5" />

</form>

</body>

</html>

<!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>

<!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": "東京"

}

]

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

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

jQuery

Posted by arkgame

関連投稿: