PHPでAjaxを使ったCSV保存機能を作る方法【サンプルコード付き】

php

PHPでAjaxを使ったCSV保存機能を作る方法

PHPでAjaxを使ったCSV保存機能を作る方法を紹介します。Ajaxとは、ページを再読み込みせずにJavaScriptからサーバーへ通信する仕組みです。このサンプルでは、入力したテキストを非同期でPHPへ送信し、CSVファイルへ保存できます。メモ保存、簡易フォーム、入力内容の一時保存などを作りたい場合に利用できます。

関連記事：
PHPでAjaxを使ったCSV更新機能を作る方法【サンプルコード付き】
PHPでAjaxを使ったCSVページネーション機能を作る方法【サンプルコード付き】
PHPでAjaxを使ったCSV無限スクロール機能を作る方法【サンプルコード付き】
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

Ajax CSV保存フォーム

コードをコピーして使おう！

<?php

// Ajax保存時の処理です
if (
    $_SERVER['REQUEST_METHOD'] === 'POST' &&
    isset($_POST['text'])
) {

    // CSVファイル名です
    $csv_file = 'data.csv';

    // 入力値を取得します
    $text = trim($_POST['text']);

    if ($text === '') {

        echo 'テキストを入力してください。';
        exit;

    }

    // CSVファイルへ追記保存します
    $fp = fopen($csv_file, 'a');

    if ($fp) {

        fputcsv($fp, [
            date('Y-m-d H:i:s'),
            $text
        ]);

        fclose($fp);

        echo '保存しました。';

    } else {

        echo '保存に失敗しました。';

    }

    exit;

}

?>

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">

<title>Ajax CSV保存</title>

<style>

body{
    font-family:sans-serif;
    background:#f8fafc;
    margin:40px;
}

.php-ajax-csv-save_wrap{
    max-width:600px;
    margin:0 auto;
    padding:24px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#ffffff;
}

.php-ajax-csv-save_title{
    font-size:22px;
    font-weight:bold;
    margin-bottom:20px;
}

.php-ajax-csv-save_field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}

.php-ajax-csv-save_label{
    font-weight:bold;
}

.php-ajax-csv-save_input{
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:10px;
}

.php-ajax-csv-save_btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:10px;
    background:#0b6bff;
    color:#ffffff;
    font-weight:bold;
    cursor:pointer;
}

.php-ajax-csv-save_result{
    display:none;
    margin-top:16px;
    padding:14px;
    border:1px solid #bbf7d0;
    border-radius:12px;
    background:#f0fdf4;
    color:#15803d;
}

</style>

</head>
<body>

<div class="php-ajax-csv-save_wrap">

    <div class="php-ajax-csv-save_title">
        Ajax CSV保存フォーム
    </div>

    <div class="php-ajax-csv-save_field">

        <label class="php-ajax-csv-save_label">
            保存するテキスト
        </label>

        <input
            id="text"
            class="php-ajax-csv-save_input"
            type="text"
            placeholder="テキストを入力"
        >

    </div>

    <button
        id="saveButton"
        class="php-ajax-csv-save_btn"
        type="button"
    >
        Ajaxで保存する
    </button>

    <div
        id="result"
        class="php-ajax-csv-save_result"
    ></div>

</div>

<script>

// 保存ボタン押下時の処理です
document.getElementById('saveButton').addEventListener('click',function(){

    const text=document.getElementById('text').value.trim();

    if(text===''){

        document.getElementById('result').textContent='テキストを入力してください。';
        document.getElementById('result').style.display='block';

        return;

    }

    // Ajax通信でPHPへ送信します
    fetch(location.href,{

        method:'POST',

        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        },

        body:new URLSearchParams({
            text:text
        })

    })

    .then(response=>response.text())

    .then(data=>{

        document.getElementById('result').textContent=data;
        document.getElementById('result').style.display='block';

        document.getElementById('text').value='';

    });

});

</script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、index.php と data.csv を同じフォルダに配置して使用します。入力されたテキストはAjax通信でPHPへ送信され、data.csv に追記保存されます。 

sample/
├── index.php
└── data.csv

index.php と data.csv を同じフォルダへ配置し、ブラウザから index.php にアクセスしてください。data.csv は事前に作成し、1行目に datetime,text を記述しておくと管理しやすくなります。

コメント