SQLの窓

2015年05月28日


jQuery の $.get と $.post と PHP の json_encode で、フォームデータをサーバのテキストファイルとして読み書き

$.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
);

?>




タグ:PHP jquery
posted by lightbox at 2015-05-28 22:54 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり