Ajaxでテキストファイルを読み込んでクリックでHTMLに書き出すjQuery

更新日：2016年5月18日

エクセルに記入しているデータをウェブサイトに表示させたいのだけど、頻繁に更新されるデータの為、その都度ウェブサイトに反映させるのは大変ですよね？何か良い方法はないでしょうか？

こんな質問を受けること、WEB担当者であれば結構あります。
ええ、大変ですとも。更新頻度が週に一度とかで、エクセルのデータが数千行にも及ぶデータだった場合、とてもじゃないですけど、その都度真面目にHTMLタグで囲って整形するのでは手間が掛かりすぎますよね。
そんな時に便利にスマートに解決してくれるのがjQueryのAjax機能です。

では早速実装方法をご紹介していきましょう。
まずは今回読み込んでHTMLで書き出したいデータは下記のテキストファイルとします。

書き出したいデータが書かれたテキストファイル

これをHTMLに表示させます。
そうそう、下準備としてエクセルに記入されているデータであれば、それをコピーしてテキストファイル（メモ帳）にペーストして下さいね。
ファイル名は任意ですが、今回はdata.txtとしておきましょう。

HTMLですが

と記述します。
ボタンと、空のpタグとdivタグがあるだけのHTMLですが、この空のタグの中にテキストファイルの中身が反映される仕組みとなっております。

そしてjQueryには

$(function() {
	var data_ary;
	$.ajax({
		url: "data.txt",
		type: "get",
		success : function(data) {
			data_ary = data.split("\n");
		},
		error:function(data) {
			alert("申し訳ありません。読み込みに失敗しました。");
		}
	})

	$("#diaplay").click(function() {
		$(".result").empty();
		var totalNumber = data_ary.length;
		var count = 0;
		for(var i = 0; i < totalNumber; i++) {
			var row = data_ary[i];
			var cell = row.split("\t");
			$(".result").append("
" + cell[0] + "
" + cell[1] + "
" + cell[2] + "
" + cell[3] + "
");
			count = count + 1;
		}
		$(".hit").text(count + "件のデータを表示しました。");
	});
});

と記述すれば、完成です。
url: "data.txt",の部分には読み込ませたいテキストファイルの場所を指定します。もしもimagesファイルの中にdata.txtがあるのであればimages/data.txtと指定してあげて下さいね。

ちなみに完成すると下記のようなボタンが表示されます。
試しにクリックしてみて下さい。

テキストファイルの内容が書き出されましたね！
これでデータが頻繁に変わる場合でも、コピーしてテキストファイルにペーストするだけで簡単に更新することが出来ますね。

今回の場合はtableに整形して書き出しています。CSSなり自由にあてて見た目も変えられますのでご自由にカスタマイズしてみて下さい。