HTML5Builderでajaxを使用する

■HTML5Builderでajaxを使用する方法

HTML5Builderでajaxを使用する方法を紹介します。

ajaxを使用するポイントは次の2点です。

  1. PageのUseAjaxプロパティをtrueにします。
    trueにすることでajaxの機能を使用できるようになります。

  2. JavaScriptから実行するPHPの関数をajaxCallメソッドで指定します。
    PHPの関数をajaxで実行する時は、ajaxCallを使用します。

    function Button1JSClick($sender, $params) {
        //PHPのShowTime関数をajaxで実行する
        echo $this->Button1->ajaxCall('ShowTime');
    }
    

次のサンプルプログラムでは、現在の日時を表示します。

「新規作成」から「HTML5Builderプロジェクト」の「サーバーWebアプリケーション」を選択します。

LabelコンポーネントとButtonコンポーネントをPage1に配置します。


Page1のUseAjaxプロパティの値を「true」にします。

Button1のButtonTypeプロパティを「btNormal」に変更します。
初期値の「btSubmit」だとボタンを押すとSubmitしてしまいます。

コードを表示し、関数を追加します。

Label1に現在の日時を表示します。

function ShowTime() {
    $this->Label1->Caption = date('y/m/d(D) H:i:s');
}

Button1のJavascriptのOnClickイベントを追加します。
ajaxでShowTime関数を実行します。

function Button1JSClick($sender, $params) {
    echo $this->Button1->ajaxCall('ShowTime');
}

実行画面

■ajaxCallメソッドの引数

ajaxCallメソッドは引数を3つとります。

第1引数は実行するPHPの関数名です。

第2引数は…使われていないようです。不具合でしょうか?

第3引数は変更対象のコンポーネントの名前です。未指定の場合はすべてのコンポーネントが対象になります。

//Label1のみ変更する
echo $this->Button1->ajaxCall('ShowTime', array(), array('Label1'));

■ajaxCallでPHPの関数に引数を渡すには

ajaxで実行する関数に引数を渡すには、Javascriptで変数paramsに値を代入します。

次のサンプルプログラムは、引数の合計値を表示します。

//ajaxで実行するPHPの関数
//引数$paramsの合計値をLabel1に表示する
function sum($sender, $params) {
    $this->Label1->Caption = array_sum($params);
}

function Button1JSClick($sender, $params) {
    ?>
    //begin js
    params = [1,5,7]; //PHPのsum関数に渡す引数
    //end
    <?php
    echo $this->Button1->ajaxCall('sum');
}

なお、sum関数の第1引数($sender)はajaxCallを実行したコンポーネント(ここではButton1)になります。

ボタンを押すと…

[1,5,7]の合計値を表示します。

■追記

コメント欄で、RPCLにajaxの不具合があることを教えていただきました。

最新版のRPCLを導入する方法が以下のページで説明されています。

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください