More Related Content
Similar to System3 ajax (20)
System3 ajax
- 3. 3
Copyright (c) 株式会社HEART QUAKE All rights reserved .
処理理の流流れ
検索索条件を⼊入⼒力力する1 2 3
HTML
情報を受け取る＆
SQLを実⾏行行する
情報を検索索する
PHP SQL
4 結果を返却する5 結果を受け取る＆
結果をJSONで返却する
結果を受け取る＆
結果を表⽰示する
6
- 4. 4
Copyright (c) 株式会社HEART QUAKE All rights reserved .
Ajaxを使おう (5/5)
l PHPでJSONデータを作成する
- 少し難しいですが、excelの表を作っていくイメージです
<?php
$result[] = array(
'id'=> 1,
'name' => "Jun Chiba",
'email' => "chiba@heart-quake.com"
);
$result[] = array(
'id'=> 2,
'name' => "Jiro Muroya",
'email' => "muroya@heart-quake.com"
);
header('Content-type: application/json');
echo json_encode($result);
?>
idの列列に1,
nameの列列に Jun Chiba
emailの列列に・・・
という意味になる。
※array(アレイ) = 配列列
1つのarrayがexcelの
1⾏行行を表すイメージ
$resultがexcelの表のイメージ
表をJSON形式に変換して
画⾯面に表⽰示せよ！
復復習
- 5. 5
Copyright (c) 株式会社HEART QUAKE All rights reserved .
XML(4/5)
l 実⾏行行結果
- 先ほどと同様にJSON形式のデータが表⽰示された
- excelで表すとこういうイメージ
復復習
- 6. 6
Copyright (c) 株式会社HEART QUAKE All rights reserved .
Ajaxを使おう (5/5)
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を書き換える
復復習
- 7. 7
Copyright (c) 株式会社HEART QUAKE All rights reserved .
Ajaxを使おう (5/5)
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⾏行行あってもプログラムに変更更が
⼊入らないというのが凄いところ。
復復習
- 8. 8
Copyright (c) 株式会社HEART QUAKE All rights reserved .
STEP④ 結果の表⽰示（1/5）
<?php
$connect = mysql_connect(”localhost”,”b1_sato”,”b1_sato”);
mysql_query(”SET NAMES utf8”,$connect);
$result = mysql_db_query(”b1_sato” , ”select * from jyanken_tbl” );
/*
$resultには何⾏行行のデータが⼊入っているかはその都度度変わるので
while構⽂文を使って取得出来たデータ数分ループさせる
*/
while(true) { //無限に繰り返せ
$kekka = mysql_fetch_assoc($result); //$resultから1⾏行行⽂文切切り取る
$result[] = array(
’id'=> $kekka[’id’],
'name' => $kekka[’name’],
'email' => $kekka[’email’]
);
}
mysql_close($connect);
?>
- 9. 9
Copyright (c) 株式会社HEART QUAKE All rights reserved .
Ajaxを使おう (5/5)
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⾏行行あってもプログラムに変更更が
⼊入らないというのが凄いところ。
