今回は jQuery で用意されている Ajax 関数を使って PHP からデータを取得する方法について説明します。
この例は、よくあるのですが、マスタテーブルからコードを指定しその内容を表示する場合に使う方法です。 （例えば、郵便番号を入力し対応する都道府県名、市町村名、住所を表示する等です。）
先ずは Ajax 関数の使い方ですが、以下の様な感じです。
<ajax関数の例> $.ajax({ type: "POST", url: "hoge.php", data: { data1: "1111", data2: "222" , ... } }).done(function(data){ // 正常処理 }).fail(function() { // 取得エラー }).always(function() { // 後処理 }); <パラメータ> ・type：リクエストのタイプ("POST"または"GET")を指定します。 ・url ：リクエストを送信するURLを指定します。 ・data：サーバーへ送信するデータを指定します。 ：{ キー値1: データ値1, キー値2: データ値2, キー値3: データ値3, ... } <メソッド> ・done(function(data){}：ajax 処理が成功した場合に呼ばれる関数宣言。 ・fail(function(){} ：ajax 処理でエラーが発生した場合に呼ばれる関数宣言。 ・always(function(){} ：ajax 処理の最後に呼ばれる関数宣言。
HTML ファイル側のソースですが以下の様になります。
■Ajaxを使いPHPからデータを取得するHTMLファイル
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Ajax関数
function getData() {
// マスタデータの取得
$.ajax({
type: "POST"
, url: "./ajax1.php"
, data: { id: $("#id").val() }
}).done(function(res){
// ajaxがOK
$("#msg").text(JSON.parse(res));
}).fail(function() {
// 取得エラー
alert('取得エラー');
}).always(function() {
// 後処理(処理することが在れば)
});
return false;
}
</script>
</head>
<body>
<h2>test ajax json</h2>
ID:<input type="text" id="id" size="10" maxlength="10" /><br />
<p id="msg">テストメッセージ</p>
<button onclick="getData();">Ajax</button>
</body>
</html>
外部PHPファイル ajax1.php がこのHTMLファイルと同じディレクトリに存在することにします。
■外部PHPファイル ajax1.php
<?php
// 処理モードの取得
$id = -1;
if (isset($_POST["id"]) == true && $_POST["id"] != "") {
$id = intval($_POST["id"]);
}
// マスタ風の仮のデータ
$arrData = array(
0 => "@@@@@@"
,1 => "AAAAAA"
,2 => "BBBB"
,3 => "CCCCCCCC"
);
$strRet = "";
if (0 <= $id && $id <= 3) {
$strRet = $arrData[$id];
}
// 結果を返す
echo(json_encode($strRet));
このPHPファイルは POST された id を取得し、その値をキーとして、マスタデータの仮の配列データから 文字列を取得します。 その文字列を JSON データに変換して echo 関数で返してやります。
返されたデータは、HTML側の done 関数の引数に渡されます。 そこでその引数の値を JSON データから逆変換し、HTMLのタグに設定してやります。
実際にHTMLファイルをブラウザで表示し、IDを入力しボタンを押下すれば対応するデータが表示されると思います。
PR
コメント