jQuery と php を連携させたい② ~ json ファイル表示・削除編~

かしこ 35views 更新:2016年9月15日

先日作成した json 保存処理に機能を追加してみました。

(前回の → http://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, "") ;
    }
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません