jQuery:Ajaxを使用してPOST送信でデータ取得

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

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

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

下記にjQueryAjaxを使用して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形式で返します。


jQuery:jQueryで配列をループする「each」

jQueryeachメソッドを使用して配列ループする方法をメモします。

前回、Javascriptで配列をループする方法を記載しました。

Javascript:Javascriptで配列をループする「for」

eachメソッド
繰り返し処理を行う時に使用するjQueryの関数です。
配列以外にもオブジェクトも繰り返し処理を行うことが可能です。

下記にjQueryeachメソッド配列ループし、配列の値を出力した時の方法をメモします。


jQueryで配列をループ

配列を「$.each」にセットします。
コールバック関数の「function(i, value)」に値が格納されます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

    var arr = ["a", "b", "c", "d", "e"];

    $.each(arr, function(i, value) {
        $('body').append(i + ':' + value + '<br>');
    });

});
</script>

下記のように出力されます。

0:a
1:b
2:c
3:d
4:e

配列をループする時にfor文を使用してもいいのですが、
jQueryを使う場合はeachメソッドを使用しても良さそうです。

Javascript:Javascriptで配列をループする「for」

Javascript配列ループする方法をメモします。
配列をループさせる場合はfor文を使用します。

lengthを使用して配列の数を取得し、取得した数までループすれば、
配列の全ての値を出力することが可能です。

下記にJavascript配列ループし、配列の値を出力した時の方法をメモします。


Javascriptで配列をループ

Javascriptで配列を用意し、for文でループします。
「arr.length」で配列の数を取得しています。

<script type="text/javascript">
var arr = ["a", "b", "c", "d", "e"];

for (i = 0; i < arr.length; i++) {
    document.write(arr[i] + '<br>');
}
</script>

下記のように文字列を書き出します。

a
b
c
d
e

上記の方法で配列をループし値を出力することができます。
phpのforeachのようなものがあれば簡単にループすることができるのですが…

CPI:CPIサーバでmod_rewriteを使用する方法

CPIサーバmod_rewriteを使用する場合は、「.htaccess」に設定が必要です。
(※シェアードプランACE01を使用)

最初の状態ではmod_rewriteを使用することができないので、
.htaccessにmod_rewriteを使用する為の設定を行います。

phpのフレームワークWordPressなどを使用する時はURLの書き換えを行いリライトするので、
mod_rewriteは必要になってくると思います。

下記にCPIサーバmod_rewriteを使用する為の.htaccess設定方法をメモします。


CPIサーバでmod_rewriteを使用する方法

ドキュメントルートに「.htaccess」を設置します。
設置した.htaccessに下記の内容を記述をします。

Options +FollowSymLinks

この一行を記述することでmod_rewriteを使用することができるようになります。
リライトルールは「Options +FollowSymLinks」の下に記述します。

また、CPIサーバでphpを使用する場合は下記の内容を.htaccessに記述をします。
この記述をしないとphpが動かないので要注意です。

※PHP 5.3.6の場合

AddHandler x-httpd-php536 .php

phpのバージョンを変更することもできます。

cpi_php_set


CPIサーバでphpやmod_rewriteを使用する際は
上記の設定を行う必要があります。

PHP:PostgreSQLで取得した全てのデータを配列で取得「pg_fetch_all」

phpPostgreSQLのデータを取得する時に、取得したデータ全て配列で取得したい場合があります。

pg_fetch_all()」を使用すれば「pg_query()」で実行した全てのデータを配列で取得することができます。

下記にpg_fetch_all()の説明と使用方法を記述します。

PostgreSQLはあまり使用することが少ないので、メモしておきます。


「pg_fetch_all()」の説明

取得した全てのデータを配列で取得します。

pg_fetch_all(クエリ結果)

「pg_fetch_all()」の使用方法

下記にpg_fetch_all()を使用した時の使用例を記述します。

<?php

// PostgreSQLに接続
$conn = pg_connect('host=localhost dbname=dbname user=username password=password');

// SQL文を実行
$result = pg_query('SELECT * FROM sample');

// 全てのデータを配列で取得
$data = pg_fetch_all($result);

// PostgreSQLを切断
$close = pg_close($conn);

?>

pg_fetch_all()で取得した値は下記のように配列で取得します。

Array
(
	[0] => Array
		(
			[id] => 1
			[name] => test1
			[status] => 1
		)

	[1] => Array
		(
			[id] => 2
			[name] => test2
			[status] => 2
		)

		・
		・
		・
)

データの取得方法は他にも色々ありますが、配列で全てのデータを取得する場合は
「pg_fetch_all()」を使用すると、配列で取得することができます。