Subscribe
WEBサイトでDBを用いてシステム構築しているケースは多々あります。
使用するテーブルが１つならいいけど複数のテーブルを使用していて、更新の際にすべて変更しなきゃいけないときってめんどくさいですよね。
adminページ的なものを設けてもPHPで更新するとなるとページ遷移が必要になってTable1を更新→遷移→Table２を更新→遷移．．．みたいな。
というわけでこのページ遷移をなくす方法として非同期通信(Ajax)を使用する方法をあげときます。
一応例として作ったページはこちら
適当にフィールドにデータいれて修正ボタンを押してもらえたらDBの値が更新されます。
更新されたデータはテーブル情報のとこに出力されるようになってます。
まず用意するファイルは4つ
- index.html
- jquery.js
- ajax_revise.js
- revise.php
jquery.jsはJavaScriptのフレームワークです。 無料配布されてるのでこちらからダウンロードしてきて使用してください。
残りの三つは自分で勝手に作ってください。
ファイルの中身はこんな感じ
index.html
<!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" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax_revise.js"></script>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>ajaxでデータベース更新</title>
</head>
<body>
<div id="tableinfo"></div>
<br />
<div>
<h4>修正フォーム</h4>
<table>
<tr>
<td>field1</td><td><input type="text" width="5" id="data1" /></td>
</tr>
<tr>
<td>field2</td><td><input type="text" width="5" id="data2" /></td>
</tr>
</table>
<br />
<input type="button" value="修正" id="revise" />
</div>
</body>
</html>
ajax_revise.js
// JavaScript Document
$(function(){
$.post("revise.php",{},function(res){
$("#tableinfo").html("テーブル情報<br />field1:"+res.field1+"<br />field2:"+res.field2)
$("#data1").val(res.field1);
$("#data2").val(res.field2);
},"json");
$("#revise").click(revise);
});
function revise(){
a = $("#data1").val();
b = $("#data2").val();
$.post("revise.php",{field1:a,field2:b},function(res){
$("#tableinfo").html("テーブル情報<br />field1:"+res.field1+"<br />field2:"+res.field2)
$("#date1").text(res.field1);
$("#date2").text(res.field2);
},"json");
}
revise.php
<?php
$hostname="******";
$username="******";
$password="******";
$dbname="******";
$conn = mysql_connect($hostname, $username, $password) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
$sql = "SET NAMES utf8";
$res = mysql_query($sql) or die(mysql_error());
if(isset($_POST['field1']) && isset($_POST['field2'])){
$field1=htmlspecialchars($_POST['field1'],ENT_QUOTES);
$field2=htmlspecialchars($_POST['field2'],ENT_QUOTES);
$sql = "update `test20091230` set
`field1` = '".$field1."' ,
`field2` = '".$field2."'
where `no` = '1'";
$res = mysql_query($sql) or die(mysql_error());
}
$sql = "select * from `test20091230` where `no`='1'";
$res = mysql_query($sql) or die(mysql_error());
$data = mysql_fetch_array($res, MYSQL_ASSOC);
$values = array('field1' => $data['field1'], 'field2' => $data['field2']);
$json = json_encode($values);
mysql_free_result($res);
mysql_close($conn);
echo $json;
?>
index.html
5～6行目でjQueryとajax_revise.jsを読み込んでいます。
7行目はCSSなのであってもなくてもいいです。
見栄えが少しマシになります。
12行目はajax_revise.jsからhtmlを流し込むためのDivです。（セレクタは#tableinfo）
21、24行目に修正データを入力するinputタグを配置しています。
30行目でボタンを設置し、このボタンのクリックと同時に修正されるようにします。
ajax_revise.js
2行目の$(function(){ はindex.htmlがすべて読み込まれたあとに実行されることを保証されてる範囲です。
3行目でrevise.phpにPOSTで通信してます。 返された値はjsonでresに格納されます。
4～6行目でresをindex.htmlの各セレクタに流し込みます。
8行目はイベントリスナの登録です。 １１行目以降がボタンをクリックされたときの動きになるのですが、こちらは$(function(){の範囲外ですのでindex.htmlが読み込まれる前に実行される可能性があり、#reviseを正常に解釈できない可能性があるので先に登録しておきます。
11行目以降は前述の通り、修正ボタンをクリックされたあとの動きです。
12～13行目で修正フォームに記入された値をとりa,bに格納。
それを引数として１５行目でrevise.phpにまた値を送っています。
以下は２行目～の部分と大差ないので省略します。
revise.php
2～6行目にそれぞれ自分のデータベースのデータを入力してください。
8～9行目はmysqlに２～6行目で定めたデータを使ってアクセス。
11～12行目はmysqlのエンコードの設定です。 僕のDBは少し変なことしてしまったのでこれが必要になります。 なくても動く人もいるけどあっても変なことにはならないので触らないのが吉
14～23行目はindex.htmlでボタンをクリックされ、ajax_revise.jsでデータをPOSTで送られてきたときに動くところで、受け取った値でデータベースを更新しています。 ちなみに今回はレコード番号１を更新するという形にしました。
26～27行目で更新後あるいはPOSTでデータが送られていなければそのままのレコードをとってきます。
29行目でレコードのデータを$dataに格納しています。（今回はレコードが１つしかないのが自明なのでそのままの代入でおkです）
31行目でそれを連想配列で保管しています。
33行目でjsonに変換しています。
もともとjsonに変換する関数はPECLにあったんですがPHP5.2以降では標準で存在します。
なので自分のPHPが５．２以降ならこのままでおkです。 以前ならPECLから引っ張てきてください。
35～36行目でmysqlとの通信終了
38行目で生成されたjsonデータを出力
ちゃっちぃプログラムですがこんな感じで非同期通信でのデータベースが可能になります。
ajax_revise.jsで普通にjQuery使っちゃってますが意味不明なかたは日本語リファレンスがあったと思うのでそちらを参照してください。
