問題 × 解決策

AjaxでCSVファイルを読み込んで表示する方法

問題

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ならば項目なしとして処理を進めていきます。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 × 5 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧