先日作成した json 保存処理に機能を追加してみました。
(前回の → https://hacknote.jp/archives/22335/ )
1) 保存した json を画面表示
2) json の削除(json ファイルの中身を空白更新で実施)
3) js、css は別ファイルにしました
■ test.php (読込、削除ボタン追加)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="treatment.js"></script>
<link href="treatment.css" rel="stylesheet" type="text/css" media="all">
<title>json 操作</title>
</head>
<body>
<div>
<h2>入力エリア</h2>
</div>
<div class="input_area">
名前：<input type="text" id="input_name" />
</div>
<div class="input_area">
年齢：<input type="text" id="input_age" maxlength="3"/>
</div>
<div class="input_area">
性別：
<select id="input_gender">
<option value="1">男性</option>
<option value="2">女性</option>
</select>
</div>
<div class="button_area">
<span id="save" class="common_button">保存</span>
<span id="load" class="common_button">読込</span>
<span id="delete" class="common_button">削除</span>
</div>
<div id="load_area">
</div>
</body>
</html>
■ treatment.css (外出しした css)
@CHARSET "UTF-8" ;
.error_message
{
color : #FF0000 ;
margin : 0px 5px ;
}
.input_area
{
margin : 5px ;
}
.button_area
{
margin : 10px ;
}
.common_button
{
width : 100px ;
text-align : center ;
margin : 5px ;
padding : 5px 10px 5px 10px ;
border : 1px solid ;
}
.common_button:hover
{
cursor : pointer ;
background-color : #CCCCCC ;
}
.data_table
{
width : 100% ;
border: 2px #000000 solid ;
}
.table_th
{
color : #FFFFFF ;
background-color : #000000 ;
border: 1px #FFFFFF solid ;
}
.table_td
{
border: 1px #555555 solid ;
}
■ treatment.js (外出しした js / 読込、削除処理追加)
$(function() {
/* 年齢の入力チェック(数字以外はエラー) */
$("#input_age").change(function(){
$(".input_age_error").remove() ;
if(!$(this).val().match(/^(\d)*$/)) {
$("#input_age").after("<span class=\"error_message input_age_error\">数字を入れて</span>") ;
}
})
/* 保存ボタン押下したとき */
$("#save").on("click", function() {
if(!confirm("登録しますか?")) {
return false ;
}
$.post(
/* 動かす php */
"json_test.php"
, {
/* 送信パラメータ(入力値) */
mode : 1 // save
, name : $("#input_name").val()
, age : $("#input_age").val()
, gender : $("#input_gender").val()
}, function(data, status)
{
if(status == 'success') {
alert("保存しました") ;
} else {
alert("失敗1") ;
}
}
) ;
})
/* 読込ボタン押下したとき */
$("#load").on("click", function() {
if(!confirm("読み込みますか?")){
return false ;
}
$.getJSON("data.json", function(json) {
/* 画面表示 */
var scr ="<h2>読込結果</h2>" ;
scr += "<table class=\"data_table\">"
+ "<thead><tr>"
+ "<th class=\"table_th\">名前</th>"
+ "<th class=\"table_th\">年齢</th>"
+ "<th class=\"table_th\">性別</th>"
+ "</tr></thead><tbody>" ;
$(json).each(function() {
var param_gender = (this.gender == 1) ? "男性" : "女性" ;
scr += "<tr id=\"data_" + this.id + "\">"
+ "<td class=\"table_td\">" + this.name + "</td>"
+ "<td class=\"table_td\">" + this.age + "</td>"
+ "<td class=\"table_td\">" + param_gender + "</td>"
+ "</tr>" ;
})
scr += "</tbody></table>" ;
$("#load_area").html(scr) ;
}).done(function(){
alert("読込ました") ;
}).fail(function() {
alert("ファイルがありません!") ;
$("#load_area").html("") ;
})
})
/* 削除ボタン押下したとき */
$("#delete").on("click", function() {
if(!confirm("削除しますか?\n(データ丸ごと消えます)")){
return false ;
}
$.post(
/* 動かす php */
"json_test.php"
, {
/* 送信パラメータ(入力値) */
mode : 2 // delete
}, function(data, status)
{
if(status == 'success') {
alert("削除しました") ;
} else {
alert("失敗3") ;
}
}
) ;
})
})
■ json_test.php (保存と削除を mode によって切り替えています)
<?php
$json_data = array() ;
/* json ファイル */
$file = "data.json" ;
if($_POST["mode"] == 1) {
/* 保存処理 */
if(is_file($file) === false) {
/* 無ければ新規作成 */
touch($file) ;
chmod($file, 0777) ;
} else {
/* ある時は保存データを取得(ファイルがあっても空の場合は無視) */
$file_data = file_get_contents($file) ;
if(!empty($file_data)) {
$json_data = json_decode($file_data, true) ;
}
}
$json_data[] = array(
"id" => count($json_data)
, "name" => $_POST["name"]
, "age" => $_POST["age"]
, "gender" => $_POST["gender"]
) ;
/* 書き込み */
file_put_contents($file, json_encode($json_data)) ;
} else if($_POST["mode"] == 2) {
/* 削除処理(json の中身を空にしてます) */
if(is_file($file) === false) {
/* ファイルが無いとき */
return false ;
} else {
file_put_contents($file, "") ;
}
}
