(Ajax,PHP)Ajaxを使って入力フォームに戻ったときに値を再セットする

(PHP)セッションを使ってて入力フォームページに戻ると入力内容がクリアされるや(PHP)Smarty利用時に入力チェックエラー時に入力画面に戻し入力データを再表示する方法と関係のある話になります。

今回、[Rails] Ajaxによる入力と、"戻る"ボタン対策 : 篳篥日記を参考にさせてもらいました。

要は、入力画面で入力した値をセッション変数に保存→入力画面に戻ったらAjaxリクエストによってセッション変数に保存した値をJSONで取ってきてフォームに再セットという流れです。

この手法はページ全体をAjax化してなくても、ページ毎にURLが変わる典型的なWEBページでも使うことができると思います。

以下にサンプルコードを載せますが、AjaxはjQueryライブラリ、サーバサイドはPHP、テンプレートエンジンはSmartyを使っています。（文字数制限のためハイライトはOFFです）

●test_inputdataset.php

最初に表示する入力フォームを表示するPHP スクリプトです。

Smartyを使って基本のページテンプレートを呼び出します。



    //最初に表示される入力フォームのページ
    session_start(); //セション開始
    require 'smarty/libs/Smarty.class.php';
    $smarty = new Smarty;
    $smarty->display("test_input_page.tpl");
?>

●test_input_page.tpl

ページのSmartyテンプレートです。

最初に表示されたときは、入力フォームテンプレートである、test_input_form.tplを読み込みます。




    入力テスト
    
    
    


    

        {include file="test_input_form.tpl"}

●test_input_form.tpl

入力フォームのテンプレートです。

●test_input_form.tpl

確認画面のテンプレートです。

戻るボタン押下時に、backInputPate() 関数を実行します。


    確認画面

    氏名：{$name}

    電話：{$tel}

    年齢：{$age}

    選択：{$sel}

●test_input_preview.php

確認画面を表示するためのPHPです。

入力フォームから渡された値をセッション変数に保存します。(



    session_start();

    $input_data_ary = $_POST;
    //入力フォームから渡されたデータをセッション変数に保存
    $_SESSION["input"] = $input_data_ary;
    
    require 'smarty/libs/Smarty.class.php';
    $smarty = new Smarty;
    $smarty->assign("name",$input_data_ary["name"]);
    $smarty->assign("tel",$input_data_ary["tel"]);
    $smarty->assign("age",$input_data_ary["age"]);
    $smarty->assign("sel",$input_data_ary["sel"]);
    $smarty->display("test_input_preview.tpl");
?>

●test_input_getjson.php

セッションに保存された値をJSON形式で返すPHPです。

(セッションがない場合はnullが返ります。)

PHPの配列をJSONにするjson_encode関数はPHP5.2以降で使えるようですね。



    //セッションに保存された入力フォームの値をJSON形式で返す
    session_start();
    if ( isset($_SESSION["input"]) ){
        echo  json_encode($_SESSION["input"]);
        return;
    }
?>

●test_input.js

入力フォームで動くJavaScriptです。

入力フォーム表示時に、Ajaxを使って入力済みのデータがあるかどうか問合せます。

データがあればJSONで返ってくるので、フォームに値をセットします。


/**
  * ページロード時に動くjQuery処理
  */
$(function(){
    //確認画面から戻ったときに値を入力フォームにセットする
    SetValue();
});


/**
  * 入力データの値をJSONでもらい、フォームにセットする
  */
function SetValue(){
    $.getJSON(  //jQueryを使ってJSONデータ取得
        "test_input_getjson.php", //アクセス先
        function(data,status){ //dataにJSONデータが入っている。
            if ( data ){
                for (var key in data) {
                    $("*[name=" + key + "]").val(data[key]) ;
                }
            }
        }
    );
}

/**
  * 戻るページボタンを押下した時に動かすメソッド
  * Ajaxを使い、ページそのままでコンテンツのみ変更。
  */
function backInputPate(){
    $.ajax({
        type: "GET",
        url:  "test_inputdataset.php",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Ajax-Request", "true");
        },
        success: function(response) {
            //$("#body").empty();
            $("#body").html(response);

        }
    });
    return false;

}


/**
  * 送信ボタンを押下した時に動かすメソッド
  * Ajaxを使い、ページそのままでコンテンツのみ変更。
  */
function SendData(){
    var form = $("form#input");
    $.ajax({
        type: "POST",
        url:  "test_input_preview.php",
        data: $(form).serialize(),
        dataType: "text",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Ajax-Request", "true");
        },
        success: function(response) {
            $("#body").html(response);
            /*もし動的にJSを読み込みたい時は以下のようのすればよろし
               $.getScript("../findmail_check.js", function(){
                   alert（"読み込み完了");
               });*/
        }
    });
    return false;
}