jQuery serializeArrayメソッドで画面からJSONの配列を作成するサンプル
環境
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": "東京" } ]