jQuery と php を連携させたい ~ json ファイル保存編~

かしこ 60views 更新:2016年9月14日

画面から入力されたデータを php へ渡して json ファイルとして保存させる処理です。

入力値未記入でも保存はします。

(2016/09/15) : main.php を少し修正

■ test.php

※ js、css も直書きしてます

※ 年齢入力アラート付き(数字以外はエラー)

<!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>
        $(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_button").on("click", function(){
                $.post(
                    /* 動かす php */
                    "main.php"
                    , {
                        /* 送信パラメータ(入力値) */
                          name : $("#input_name").val()
                        , age : $("#input_age").val()
                        , gender : $("#input_gender").val()
                    }, function(data, status)
                    {
                        if(status == 'success') {
                            alert("保存しました") ;
                        }
                    }
                ) ;
            })
        })
        </script>
        <style>
        .error_message
        {
            color : #FF0000 ;
            margin : 0px 5px ;
        }
        #save_button
        {
            width : 100px ;
            text-align : center ;
            margin : 5px ;
            padding : 5px 10px 5px 10px ;
            border : 1px solid ;
        }
        #save_button:hover
        {
            cursor : pointer ;
            background-color : #CCCCCC ;
        }
        </style>
        <title>json 保存</title>
    </head>
    <body>
        <div>
            名前:<input type="text" id="input_name" />
        </div>
        <div>
            年齢:<input type="text" id="input_age" maxlength="3"/>
        </div>
        <div>
            性別:
            <select id="input_gender">
                <option value="1">男性</option>
                <option value="2">女性</option>
            </select>
        </div>
        <div id="save_button">保存</div>
    </body>
</html>

■ main.php

※ json 保存処理。

※ 上書きではなく、追記していきます。

<?php
$json_data = array() ;
/* json 保存先ファイル */
$file = "data.json" ;
if(is_file($file) === false) {
    /* 無ければ新規作成 */
    touch($file) ;
    chmod($file, 0777) ;
} else {
    /* ある時は保存データを取得 */
    $json_data = json_decode(file_get_contents($file), true) ;
}
$json_data[] = array(
          "name" => $_POST["name"]
        , "age" => $_POST["age"]
        , "gender" => $_POST["gender"]
) ;
/* 書き込み */
file_put_contents($file, json_encode($json_data)) ;

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

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

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