(PHP)セッションを使ってて入力フォームページに戻ると入力内容がクリアされるや
(PHP)Smarty利用時に入力チェックエラー時に入力画面に戻し入力データを再表示する方法と関係のある話になります。
今回、
[Rails] Ajaxによる入力と、"戻る"ボタン対策 : 篳篥日記を参考にさせてもらいました。
要は、入力画面で入力した値をセッション変数に保存→入力画面に戻ったらAjaxリクエストによってセッション変数に保存した値をJSONで取ってきてフォームに再セットという流れです。
この手法はページ全体をAjax化してなくても、ページ毎にURLが変わる典型的なWEBページでも使うことができると思います。
以下にサンプルコードを載せますが、AjaxはjQueryライブラリ、サーバサイドはPHP、テンプレートエンジンはSmartyを使っています。（文字数制限のためハイライトはOFFです）
●test_inputdataset.php
最初に表示する入力フォームを表示するPHPスクリプトです。
Smartyを使って基本のページテンプレートを呼び出します。
<?php
//最初に表示される入力フォームのページ
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を読み込みます。
<html>
<head>
<title>入力テスト</title>
<script type="text/javascript" src="jquery-1.6.2.js">
</script>
<script type="text/javascript" src="test_input.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="body">
{include file="test_input_form.tpl"}
</div>
</body>
</html>
●test_input_form.tpl
入力フォームのテンプレートです。
<form method="post" id="input">
氏名：<input type="text" id="name" name="name" ><br>
電話：<input type="text" id="tel" name="tel" ><br>
年齢：<input type="text" id="age" name="age" ><br>
<select id="hoge" name="hoge">
<option value="1">1 : hoge１</option>
<option value="2">2 : hoge２</option>
<option value="3">3 : hoge３</option>
</select>
<input type="button" value="送信" onclick＝"return SendData()">
</form>
●test_input_form.tpl
確認画面のテンプレートです。
戻るボタン押下時に、backInputPate() 関数を実行します。
確認画面<br>
氏名：{$name}<br>
電話：{$tel}<br>
年齢：{$age}<br>
選択：{$sel}<br>
<input type="button" value="戻る" onclick＝"return backInputPate()">
●test_input_preview.php
確認画面を表示するための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以降で使えるようですね。
<?php
//セッションに保存された入力フォームの値を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するとオブジェクトで返って来てしまう - カサヒラボ
