フォームに予めデータを埋め込む時は「value=""」でセットしますが、書きのフォームのHTMLは空です。
そこに対してJSで値を埋めています。
<form id="demo_form"> <div> data1 <input type="text" name="data1" size="40" value="" > </div> <div> data2 <input type="text" name="data2" size="40" value="" > </div> <div> data3 <input type="text" name="data3" size="40" value="" > </div> </form>
このHTMLに
[{"data1":"abc","data2":123,"data3":"\u3042"}]
というJSONの値をセットしています。
フォームに値をセットしているJSはこちら
$(document).ready(function(){ //JSONファイル、またはJSONを返すAPIのパス jsonPath = '/trial/php/293/api/'; $.ajax({ url: jsonPath, cache: false, success: function(json){ for (var i = 0;i < json.length;i++){ for (var key in json[i]) { $('#demo_form input[name='+key+']').val(json[0][key]); } } } }); });
過去の記事が空欄のフォームに入力するので言わば「新規登録」のフォーム。
今回のサンプルは、「更新」のときのフォームに非同期でデータを反映する事例になります。