忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

JavaScript jQueryでAjaxを使いPHPからデータを取得する方法

今回は 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

コメント

コメントを書く