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


Fuelphp:Inputクラスを使用し、$_GETや$_POSTの値を取得する

fuelphp$_GET$_POSTの値を取得する場合は、Inputクラスを使用します。
今回はfuelphpのInputクラスを使用し、GETPOSTなどの変数の値を取得する方法をメモします。


Inputクラス

HTTPパラメータ、サーバ変数、ユーザエージェントなどの情報を参照するためのクラスです。


$_GETの値を取得する場合

getメソッドを使用します。
引数がない場合は、$_GETの全ての値を取得します。

・getメソッド

get('配列要素', '規定値')

・使用方法(getメソッド)

// $_GETの全ての値を取得する場合
Input::get();

// $_GET['id']の値を取得する場合
Input::get('id');

$_POSTの値を取得する場合

postメソッドを使用します。
引数がない場合は、$_POSTの全ての値を取得します。

・postメソッド

post('配列要素', '規定値')

・使用方法(postメソッド)

// $_POSTの全ての値を取得する場合
Input::post();

// $_POST['hoge']の値を取得する場合
Input::post('hoge');

// $_POST['hoge']['id']の値を取得する場合
Input::post('hoge.id');

他にもInputクラスにはcookieメソッド、serverメソッド、fileメソッドなどを使用し、$_COOKIE、$_SERVER、$_FILESなどの情報を取得することができます。

CakePHP:CakePHPで$_GETの値を取得

CakePHPで$_GETの値を取得する方法を記載します。
CakePHPでは$this->params[‘url’]に格納され、$_POSTの値は$this->params[‘form’]に格納されます。
CakePHPではGETやPOSTの値はparams配列に格納されます。


■ $_GETの値を取得する

下記のURLでアクセスした場合

http://raining.bear-life.com/?id=20&name=hoge

「id」の値を取得

$this->params['url']['id'];

「20」が取得できます。


「name」の値を取得

$this->params['url']['name'];

「hoge」が取得できます。

※$this->params[‘url’]では$_POSTの値が取得できないので注意です。


Javascript:JavascriptでPOSTの値を追加する

Javascriptでsubmitボタン押下時にPOSTされるデータを追加したい場合があります。
フォーム内に複数のボタンを設置した際に押されたボタンによってPOSTするデータを追加したい場合あったので、その時のメモです。


■ Javascript

function funcBtn() {
	// エレメントを作成
	var ele = document.createElement('input');
	// データを設定
	ele.setAttribute('type', 'hidden');
	ele.setAttribute('name', 'hoge');
	ele.setAttribute('value', 'テスト');
	// 要素を追加
	document.myForm.appendChild(ele);
}

■ HTML

<form method="post" id="myForm" name="myForm">

    (省略)

    <input type="submit" name="btn" value="ボタン" onclick="funcBtn();" />

</form>

ボタン押下時、hiddenでhogeにテストという値がPOST送信されます。