Ajax3
- 1. 1
Copyright (c) 株式会社HEART QUAKE All rights reserved .
Ajaxによるデータ連携
ここからはHTMLとPHPを連携させ、⼊入⼒力力されたメールアドレスに
メールを送るなどの⾼高度度な処理理を⾏行行っていきましょう。
その際にAjaxと呼ばれる⾮非同期通信技術を利利⽤用すると
ユーザーによって画⾯面の遷移がない、スムーズなシステムを
実現することができます。
- 2. 2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
JSONデータの受け取り〜～応⽤用編〜～(1/4)
l JSONで受け取ったデータを表⽰示する
以上省略
$(document).ready( function() {
$("button").click(function(){
$.getJSON(
"return_json.php",
function(json){
$(”#result”).html(”0人目の名前: ” + json[0][”name”]);
}
);
});
});
</script>
</head><body>
<button>情報取得！</button>
<hr>
<div id=”result”>ここに結果が表示される</div>
以下省略
JQuery講座で学んだ知識識の復復習
id = result の部分の
htmlを書き換える
- 3. 3
Copyright (c) 株式会社HEART QUAKE All rights reserved .
JSONデータの受け取り〜～応⽤用編〜～(2/4)
l JSONで受け取ったデータを表⽰示する
以上省略
$(document).ready( function() {
$("button").click(function(){
$.getJSON(
"return_json.php",
function(json){
var data = ”0人目の名前: ” + json[0][”name”];
$(”#result”).html(data);
}
);
});
});
</script>
</head><body>
<button>情報取得！</button>
<hr>
以下省略
変数(=var) dataを⽤用意して、
そこに表⽰示したい⽂文字を仮保存しておく。
「＋」を使うことで⽂文字を連結できる。
- 4. 4
Copyright (c) 株式会社HEART QUAKE All rights reserved .
JSONデータの受け取り〜～応⽤用編〜～(3/4)
l JSONで受け取ったデータを表⽰示する
以上省略
$("button").click(function(){
$.getJSON(
"return_json.php",
function(json){
var data = ”0人目の名前: ” + json[0][”name”];
data = data + ”<br>”;
data = data + ”1人目の名前: ” + json[1][”name”];
$(”#result”).html(data);
}
);
});
});
</script>
</head><body>
以下省略
今、dataに⼊入っている⽂文字の
⼀一番後ろに、⽂文字を付け加えて
※「+」を書くと付け加えられる
それをdataに上書きする
- 5. 5
Copyright (c) 株式会社HEART QUAKE All rights reserved .
JSONデータの受け取り〜～応⽤用編〜～(4/4)
l JSONで受け取ったデータを表⽰示する
- 今は2⾏行行のデータだからいいけど、これが100⾏行行だったら
プログラムはどーなる？？
以上省略
function(json){
var data = "";
for(var i in json){
data = data + i + "人目の名前: " +
json[i]["name"] + "<br>";
}
$(”#result”).html(data);
}
);
}
}); 以下省略
変数(=var) dataを⽤用意して、
初期化しておく。
プログラミングではよくやるテクニック。
0番⽬目のデータから、jsonに⼊入っている最後
のデータまで繰り返してくれる = for構⽂文
iという変数には今、何番⽬目、という
数字が⼊入っている。
1000⾏行行あってもプログラムに変更更が
⼊入らないというのが凄いところ。
![2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
JSONデータの受け取り〜～応⽤用編〜～(1/4)
l JSONで受け取ったデータを表⽰示する
以上省略
$(document).ready( function() {
$("button").click(function(){
$.getJSON(
"return_json.php",
function(json){
$(”#result”).html(”0人目の名前: ” + json[0][”name”]);
}
);
});
});
</script>
</head><body>
<button>情報取得！</button>
<hr>
<div id=”result”>ここに結果が表示される</div>
以下省略
JQuery講座で学んだ知識識の復復習
id = result の部分の
htmlを書き換える](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)