jQueryで画面をリロードせずにデータベース等のデータを取得してページに出力したい場合があります。

Ajaxを使用すればリロードせずにphpファイルを呼び出すことが可能です。

クリックしたり、スクロールしたりするとデータを追加していくようなページなど、
色々な場面で使用できそうです。

下記にjQueryのAjaxを使用してphpファイルを呼び出してPOST送信を行い、
データベースからデータを取得した時の方法をメモします。

---

■ Ajaxを使用してPOST送信

※知り合いから指摘を受けました。
　POSTデータのチェックやSQLインジェクション対策は必ずしてください。

htmlファイルとphpファイルを用意します。

【JS】

※index.html

下記は「#btn」をクリックした時にAjaxを使用してます。

<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

データベースからデータを取得し、取得したデータを返します。

<?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形式で返します。

---

• ツイート
•