問題
AjaxでCSVファイルを読み込んで表示するには?
解決策
「Ajax」のパラメータで、「type: 'post'」+「data: { '渡す値のキー': 渡す値の内容 }」にcsvファイルのパス情報を渡し、外部PHPファイルで「fopen」を使って呼び出す。
AjaxでCSVファイルを読み込んで表示する
AjaxでCSVファイルを読み込んで表示する方法をご紹介します。
- ※今回は本日の日付のデータを外部ファイルに渡し、本日の曜日を返す例になります。
今回は以下の以下の2つの記事を応用していますので、ぜひこちらもご覧ください。
DEMOはこちら
項目のないパターンのCSVファイル
内容01_1,内容02_1,内容03_1
内容01_2,内容02_2,内容03_2
内容01_3,内容02_3,内容03_3
項目のあるパターンのCSVファイル
項目01,項目02,項目03
内容01_1,内容02_1,内容03_1
内容01_2,内容02_2,内容03_2
内容01_3,内容02_3,内容03_3
HTML
AJAX処理を行うためのボタンと、AJAXで外部ファイルから読み込んだデータを表示させるための空の要素を用意します。
項目なし
<div class="ajax-box">
<p class="btns btn-type01"><a href="#" actionkey="csv" label_boolean="false" file_path="test_label_off.csv">CSVファイルの内容を表示</a></p>
<div class="inner-box"></div>
</div>
項目あり
<div class="ajax-box">
<p class="btns btn-type01"><a href="#" actionkey="csv" label_boolean="true" file_path="test_label_on.csv">CSVファイルの内容を表示(項目あり)</a></p>
<div class="inner-box"></div>
</div>
CSS
AJAXの処理が完了するまで、ロード中であることを示すため、ローディング画像を表示させるためのcss設定を行います。
.ajax-box .inner-box .loading-box{
display: block;
height: 130px;
background-image: url("ajax-loader.gif");
background-position: center center;
background-repeat: no-repeat;
background-size: 100px auto;
}
AJAXでCSVファイルを読み込んで表示する記述例
AJAXでCSVファイルを読み込んで表示する記述例は以下になります。
if($('.ajax-box').length){
$('.ajax-box .btns a').click(function(event) {
//aリンクの動作を停止
event.preventDefault();
var innerbox = $(this).closest('.ajax-box').find('.inner-box');
innerbox.html('<div class="loading-box"></div>');
var actionkey = $(this).attr('actionkey');
var label_boolean = $(this).attr('label_boolean');
var file_path = $(this).attr('file_path');
jQuery.ajax({
type: 'post',
dataType:'text',
cache: false,
data: {
'action': actionkey,
'label_boolean': label_boolean
'file_path': file_path
},
url: 'files.php'
}).done(function(data) {
innerbox.html(data);
}).error(function(XMLHttpRequest, textStatus, errorThrown) {
alert('error!!!');
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
});
});
};
ポイント!
- AJAXで外部ファイルに必要な分だけ値を渡します。
- CSVファイルのパスに独自属性「file_path」の値を設定します。
- 独自属性「label_boolean」の値を、項目があるかどうかを判定するために渡します。
外部ファイルの記述例
外部ファイルの記述例は以下になります。
files.php
<?php
function csv(){
if(!empty($_POST['file_path'])):
$file_path = $_POST['file_path'];
$label_boolean = "false";
$label_boolean = $_POST['label_boolean'];
$valuelist = "";
$itemlist = "";
$row = 1;
if (($handle = fopen(dirname(__FILE__)."/../../docs/".$file_path, "r")) !== FALSE) {
// 1行ずつfgetcsv()関数を使って読み込む
while (($data = fgetcsv($handle,10000))) {
$col = 1;
foreach ($data as $value) {
$value = mb_convert_encoding($value, 'UTF-8', 'sjis-win');
if($row == 1 && $label_boolean == "true" ){
// 最初の行ならば、項目情報用の配列に値を格納
$itemlist[$col-1] = $value;
}
$valuelist[$row-1][$col-1] = $value;
$col++;
}
$row++;
}
fclose($handle);
for( $i = 0; $i < count( $valuelist ); $i++ ):
if( $label_boolean == "true" && $i == 0 ): else:
?>
<ul>
<?php
for( $j = 0; $j < count( $valuelist[$i] ); $j++ ):
?>
<li><?php if( $itemlist !== "" && $label_boolean == "true" ): echo $itemlist[$j]; ?>:<?php endif; ?><?php echo $valuelist[$i][$j]; ?></li>
<?php
endfor;
endif;
endfor;
?>
</ul>
<?php
}
endif;
} //csv
if(!empty($_POST['action'])):
$actions = $_POST['action'];
$actions();
endif;
?>
ポイント!
- 「fopen」でCSVファイルを読み込む際に、先ほど渡した値「file_path」を使用します。
- 「fgetcsv」でCSVファイルの中のデータを一行ずつ取得して、配列に格納します。
- 配列をfor文を使って出力していく際に、項目があるかどうかを、先ほど渡した値「label_boolean」を使い、trueならば項目あり、falseならば項目なしとして処理を進めていきます。
コメント