- 締切済み
PERL Ajax JSON 付随情報
恐れ入ります。 perl 上でJSON出力された情報を、 別ファイルのinput フィールド上に付随情報を表示したいのですが、苦戦しています。 例）Mysql上に以下のデータがあり、 0001|花|ガーベラ 0002|酒 | ビール 0003|菓子|ピーナッツ {"pro_code":"0001",bunrui":"花","pro_name":"ガーベラ"}, {"pro_code":"0002",bunrui":"酒","pro_name":"ビール"}, {"pro_code":"0004",bunrui":"菓子","pro_name":"ピーナッツ"} と、JSONにより出力したデータを、 別ファイルから読み込み、 input フィールドに0001を入力すると、別フィールドに花、ガーベラと表示されるイメージです。 よろしくお願いします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- _--_1l1_1_
- ベストアンサー率67% (102/152)
表示がくずれるので空白2文字を全角空白にしていることに注意。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Choice</title> <script type="text/javascript"> <!-- function addListener(elem, ev, listener) { if (elem.addEventListener) { elem.addEventListener(ev, listener, false); } else if (elem.attachEvent) { elem.attachEvent('on' + ev, listener); } else { throw new Error('Not support event listener'); } } function fillInput() { var code = document.getElementById('code'); var type = document.getElementById('type'); var name = document.getElementById('name'); var json = '[ \ {"code":"1", "type":"花", "name":"ガーベラ"},\ {"code":"2", "type":"酒", "name":"ビール"},\ {"code":"3", "type":"菓子", "name":"ピーナッツ"}\ ]'; var goods = eval(json); var i; for (i = 0; i < goods.length; i++) { if (goods[i].code == code[code.selectedIndex].value) { type.value = goods[i].type; name.value = goods[i].name; break; } } if (i >= goods.length) { alert('Unknown code : ' + code[code.selectedIndex].value); type.value = ''; name.value = ''; } } function init() { fillInput(); addListener(document.getElementById('code'), 'change', fillInput); } addListener(window, 'load', init); //--> </script> </head> <body> <form id="form1"> code : <select id="code"> <option value="1" selected>option1</option> <option value="2">option2</option> <option value="3">option3</option> </select><br> type : <input type="text" id="type" value=""/><br> name : <input type="text" id="name" value=""/><br> </form> </body> </html>
お礼
ありがとうございます。大変参考になりました。