jQueryで画面をリロードせずにデータベース等のデータを取得してページに出力したい場合があります。
Ajaxを使用すればリロードせずにphpファイルを呼び出すことが可能です。
クリックしたり、スクロールしたりするとデータを追加していくようなページなど、
色々な場面で使用できそうです。
下記にjQueryのAjaxを使用してphpファイルを呼び出してPOST送信を行い、
データベースからデータを取得した時の方法をメモします。
■ Ajaxを使用してPOST送信
※知り合いから指摘を受けました。
POSTデータのチェックやSQLインジェクション対策は必ずしてください。
htmlファイルとphpファイルを用意します。
【JS】
※index.html
下記は「#btn」をクリックした時にAjaxを使用してます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript">$(function() { $("#btn").click(function(){ $.ajax({ type: "POST", url: "ajax.php", data: { "page": 2 }, success: function(j_data){ // 処理を記述 } }); });});</script> |
「type」に”POST”を指定します。（POST送信を行う場合）
「url」にPOST送信を行うファイル名を指定します。
「data」にPOST送信するデータを設定します。
POST送信が成功した時に「success」で指定した引数にphpから渡されたデータが格納されます。
「success」内に必要な処理を記述します。
【PHP】
※ajax.php
データベースからデータを取得し、取得したデータを返します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php$data = array();$page = $_POST['page'];$conn = mysql_connect('localhost', 'username', 'password');$db = mysql_select_db('hoge', $conn);$sql = " SELECT * FROM test WHERE page = " . $page;$res = mysql_query($sql, $conn);while ($row = mysql_fetch_array($res)) { $data[] = $row;}mysql_close($conn);header('Content-Type: application/json; charset=utf-8');echo json_encode($data);?> |
「$_POST」にajaxで設定したデータが格納されています。
json_encode()を使用して取得したデータをJSON形式で返します。
