$.post は、$( "form" ).serialize() で一般的には容易にサーバへ入力されたデータを送る事ができます。読み込む場合も、jQuery では、JSON データ の MIME が application/json であれば自動的にオブジェクトとして受け取る事ができるので、$.post の第三引数に "json" を指定しなくてもそのまま for( prop in data ) で処理を開始できます。処理そのものも、ラジオボタンとチェックボックス以外は単純にセットする事ができます。
デモページ
jQuery の処理 / entry.js
jQuery で POST した後は、result.php が結果の HTML を返すので、用意しておいた IFRAME に document.write で書き込んでいます。( document.close しなければ、追加書き込みできます )
$(function(){
// *****************************************************
// 固定値
// *****************************************************
$("#get_default").click(function(){
$.get( "data.json", function( data ) {
// JSON から FORM へ自動セット
for( prop in data ) {
if ( prop == "in_radio" ) {
if ( data[prop] == "1" ) {
$( '[name="' + prop + '"]' ).eq(0).prop( "checked", true );
}
else {
$( '[name="' + prop + '"]' ).eq(1).prop( "checked", true );
}
continue;
}
if ( prop == "smh" || prop == "gk" ) {
$( '[name="' + prop + '"]' ).prop("checked", true );
continue;
}
$( '[name="' + prop + '"]' ).val( data[prop] );
};
} );
});
// *****************************************************
// JavaScript( jQuery ) で POST する
// *****************************************************
$("#post_form").click(function(){
$.post(
"result.php",
$( "form" ).serialize(), // FORM から 自動作成
function( data ) {
// 結果の HTML を IFRAME へ表示
$( "iframe" ).get(0).contentWindow.document.write( data );
$( "iframe" ).get(0).contentWindow.document.close();
}
);
});
});
FORM の定義 / entry.php
ファイルに書き込むので、クライアント毎のファイルが必要になるので、セッションID をファイル毎に使用しています。
FORM 内のコントロールは、一般的なものを並べています。重要なのは、各コントロールに name 属性が必要なところぐらいです。( id は、jQuery の個別処理を想定して用意していますが、ここでは特に使用していません )
HTML の機能を使って送信する事を想定していないので、type="submit" のボタンはありませんし、method 属性の記述もありません。
※ デモの実行ボタンは、js_button.php の中に記述しています。
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1280,initial-scale=1.0">
<style>
body {
line-height:150%;
background-color: pink;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<!-- 入力処理用の JavaScript -->
<script src="entry.js"></script>
</head>
<body>
<div style="position:relative;">
<?php require_once("js_button.php") ?>
<form>
氏名
<input type="text"
name="sei"
id="sei"
style="width:100px">
<input type="text"
name="mei"
id="mei"
style="width:100px">
<br>住所
<input type="text"
name="jyusyo"
id="jyusyo"
style="width:240px">
<br>性別
<select name="seibetu"
id="seibetu">
<option value="man">男</option>
<option value="woman">女</option>
</select>
<br>
<label for="in_check1">スマホ</label>
<input type="checkbox"
name="smh"
id="in_check1"
value="smh">
<label for="in_check2">ガラケー</label>
<input type="checkbox"
name="gk"
id="in_check2"
value="gk">
<br>
<label for="in_radio1">有り</label>
<input type="radio"
name="in_radio"
id="in_radio1"
value="1"
checked>
<label for="in_radio2">無し</label>
<input type="radio"
name="in_radio"
id="in_radio2"
value="0">
<br>
<input type="hidden" name="himitu" value="秘密">
<input type="password" name="pass">
<br>備考
<br>
<textarea name="bikou"
id="bikou"
style="width:320px;height:100px;"></textarea>
<br>
<?php if ( file_exists("data" . session_id() .".json") ) { ?>
<a href="data<?= session_id() ?>.json" target="result">書き込まれた json</a>
<?php } ?>
/ <a href="data.json" target="result">data.json</a>
</form>
</div>
<iframe
src="about:blank"
name="result"
frameborder="1"
scrolling="yes"
width="600"
height="450"
style='border:solid 1px #000;margin-top:10px;'
></iframe>
</body>
</html>
$.post を受け取る PHP / result.php
ここでは、json_encode で $_POST を文字列に変換してファイルにそのまま書き込んでいます。テストがしやすいように、整形して日本語をそのまま読める状態にしています。( JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT )
<?php
session_start();
header("Content-Type: text/html; charset=UTF-8");
// 30分以上前に作成された JSON ファイルの削除
require_once("unlink.php");
// ***********************************************
// デバッグ表示
// ***********************************************
print "<pre>";
$work = print_r( $_POST, true );
print $work;
print "</pre>";
print "<hr>";
// ***********************************************
// JSONフォーマットファイルとして書き込み
// ***********************************************
$json = json_encode( $_POST, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT );
file_put_contents(
"data" . session_id() . ".json",
$json
);
?>
