Welcome to my blog

ふぇぎふぇぎ

Article page

スポンサーサイト

Category - スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Category - スポンサー広告

javascriptでjsonを呼んでみる

Category - プログラミング

javascriptでjsonファイルを読み込んで表示・書き換えしたかったのでやってみた。jsonを表示したければgot関数をいい感じにする。td部分はgot関数から書き加えている。

名前募集中ならチェック
たかし
・・・・・・
ひろし
<script>
/*
SUMBITを押すとpost関数が実行されてsend.phpにPOSTされる感じ
<form name ="input_form" action="send.php" method="post" onsubmit="post()">
  <input type="submit" value="SUBMIT">
  <input type="hidden" name="hidden_input" value="">
</form>
*/
// 実際に使ったjsonのサンプル
// {"たかし":false,・・・・・・,"ひろし":true}
// jsonファイルを呼び出せたらgot関数に渡しますっていうやつ
var jsonFile = "filename.json";
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
  if(req.readyState == 4 && req.status == 200){
    // 取得したjsonをjavascriptのobjectに変換したものをgot関数に渡す
    got(JSON.parse(req.responseText));
  }
};
req.open("GET", jsonFile, false);
req.send(null);

// 実際にごにょごにょする関数
function got(obje){
  // jsonファイルのキーをひとつずつ処理していく感じ
  for(var key in obje){
    // obje[key]でキーに対応する値を扱える
   // console.log(key + ':' + obje[key]);
  }
}

function post(){
  // 実際にはhtml要素からデータをとってきてjsonの形式の文字列をhidden_inputのvalueにぶち込む
  var inputs = document.getElementById('table').getElementsByTagName("input");
  var x="{";
  // ここでfor(in)を使っていないのは区切りの「,」をいい感じにしたかったため
  for(var i=0;i<inputs.length;i++){
    x+= '"'+ inputs[i].name +'" : '+ inputs[i].checked + (i!=inputs.length-1?',':'}');
  }

  document.forms['input_form'].elements['hidden_input'].value = x;

}
</script>

フェバンニが一晩でやりました。はぁおっぱい

Category - プログラミング

- 0 Comments

Post a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。