3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。(jehupc.exblog.jpから移転中)

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

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

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

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

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

以下にサンプルコードを載せますが、AjaxjQueryライブラリ、サーバサイドは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;

}

数年ぶりにJSONを使ったのですっかり仕様を忘れていました。

参考サイトのおかげで何となく思い出すことができました。

参考:

逆引きjQuery:非同期でJSON形式のデータを取得するには? - @IT

jQueryクライアントとPHPサーバ間をJSONで結ぶには (3/3) ─ @IT

jQueryでjsonデータを扱ってみる【入門編】 | webOpixel

JSONをjQueryで扱う方法 : ずっと工事中

PHPでJSON形式の出力 - TRAJECTORY.JP -

phpで、json_encodeした配列に、json_decodeするとオブジェクトで返って来てしまう - カサヒラボ