こんにちは かねしろ@pinkrootです。
昨日は久しぶりにPHPでのコーディングを行いました。
取り組んだのはPHPとjQueryを組み合わせて、あるボタンが押されたときにajaxなPOSTを飛ばして、その飛んでいったパラメータをMySQLに格納する、という文字での説明が難しい処理です(笑) イメージとしては、ボタンを押しても画面がリロード(更新)されず、処理の裏側でDBへのデータ格納を行なっている、という感じ。
備忘録的にやり方をまとめます。
HowTo
自分で作成するファイルは以下の3つ。
- ユーザが閲覧してボタンを押す画面(index.html)
- ボタンが押されたら呼び出されるjavascriptファイル(post.js)
- バックボーンで動作し、MySQLでデータを格納するPHPファイル(post.php)
上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となります。
ここから1.7.2のMinifiedをダウンロードして使いました。
ダウンロードしてきたjquery-1.7.2.min.jsと自作のpost.jsはjsディレクトリを作成し、その中にまとめて置きました。
.ProjectDirectory
index.html
post.php
.js
jquery-1.7.2.min.js
post.js
というようなディレクトリ構成。
index.html
index.htmlのコードは以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./js/post.js"></script> </head> <body> <form> <INPUT type="button" value="submit" onClick="ajaxPostFunc('param1', 'param2');"> </form> </body> </html> |
head内でjsファイルを呼び出しておき、body内のbuttonにはjsで定義した関数(ajaxPostFunc)をonClickで呼び出すように設定しておきます。
肝になるのがボタンに対してonClickを設定しておくところ。 このonClickで呼び出される関数から、ajaxの一連の処理が始まります。
後々、MySQLに格納したいデータを、ajaxPostFuncに引数として渡しておきます。
今回はparam1, param2という2つの文字列をパラメータとして渡しておきました。
post.js
post.jsのコードは以下の通り。
|
1 2 3 |
function ajaxPostFunc(param1, param2){ $.post("post.php", {input1:param1, input2:param2}, function(json){alert("パラメータを2つPOSTしました");}); } |
ajaxPostFuncが呼び出されると、$.postという謎の機能が働くことになります。
この機能が働くと、引数として受け取っておいたparam1, param2をpost.phpにPOSTパラメータとして渡します。
このとき、param1はinput1, param2はinput2という名前に変えて渡してあります。(説明のため) 渡し方はJSON形式なので、パラメータが増えた時も対応が簡単です。
その後、「パラメータを2つPOSTしました」というalertを表示するまでがこのjsファイルの役目です。
post.php
post.phpのコードは以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php // MySQLへ接続する準備。DB名や認証に必要な情報を格納 $url = "localhost"; $user = "user"; $pass = "password"; $db = "sample_db"; // MySQLへ接続する $connect = mysql_connect($url, $user, $pass) or die("MySQLへの接続に失敗しました。"); // 手を加えるデータベースを選択する $sdb = mysql_select_db($db, $connect) or die("データベースの選択に失敗しました。"); // POSTされたパラメータを受け取る $myInput1 = $_POST["input1"]; $myInput2 = $_POST["input2"]; $timestamp = time(); // クエリを送信する $sql = "INSERT INTO sample_table VALUES('$timestamp', '$myInput1', '$myInput2')"; $result = mysql_query($sql, $connect) or die("クエリの送信に失敗しました。<br />SQL:".$sql); // MySQLへの接続を閉じる mysql_close($connect) or die("MySQL切断に失敗しました。"); ?> |
細かいことはコメントに書いてあるので、それを読めばどのような処理をしているかは分かるかと思います。
なお、今回はDBとして以下のようなテーブルを用意しました。
主キーとして、今回はテキトーにtimestampを格納しておきました(笑)
なお、各ソースはgithubにアップしてあります。 git@github.com:pinkroot/php-ajax-mysql-sample.git
挙動
まず、index.htmlにアクセスするとsubmitボタンが表示されます。
このボタンを押すと、画面がリロードされることなく、alertが表示され、ウラではDBに情報が格納されます。
実際にデータベースの中身を見に行くと、param1, param2とやらが格納されているのが確認できます。
あとは、この渡しているparamを可変な何かにしてしまえば、自分の渡したいパラメータをページのリロード無しでDBに格納することができます。
参考にしたサイト
PHPプログラミング初心者入門講座 – PHPからMySQLデータベースに接続する方法
[jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル
JQueryとPHPで作るシンプルなAJAX PHPで簡単なAjaxプログラムを作ろう (その1)
誠実★信用★顧客は至上
在庫情報随時更新!
人気最新品┃特恵中┃☆腕時計、バッグ、財布、ベルト、アクセサリー、小物☆
商品数も大幅に増え、品質も大自信です
低価格を提供すると共に、品質を絶対保証しております
ご注文を期待しています