人気ブログランキング | 話題のタグを見る
(Ajax,PHP)Ajaxを使って入力フォームに戻ったときに値を再セットする
(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 : hoge1</option>
<option value="2">2 : hoge2</option>
<option value="3">3 : hoge3</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するとオブジェクトで返って来てしまう - カサヒラボ
by Jehoshaphat | 2012-11-17 19:30 | PHP開発


<< (JavaScript)jQu... (PHP,Ajax)Smart... >>