【jQuery】外部ファイルの読み込みと操作

今回は、外部ファイルの読み込みと操作、GETメソッドを使ったファイルの扱い方を中心に紹介していきます。APIを使ったWebアプリケーションをつくる際に必要になってくるJSON形式について覚えましょう！！

以下のファイルを用意してください。
sample.html

<h2>load</h2>
<p>外部ファイルのテキストデータをそのままタグに置き換える</p>
<!-- javascript:void(0)：リンク表示、アクションは起こさない -->
<div><a id="load" href="javascript:void(0)">読み込み</a></div>
<div id="txtLoad">データ</div>

<br />

<p>外部ファイルのHTMLデータをそのままタグに置き換える</p>
<a id="load2" href="javascript:void(0)">読み込み(HTML)</a>
<div id="htmlLoad" >データ(HTML)</div>

<br />

<h2>get/post</h2>
<p>getまたはpostで外部データを取得して変数を格納</p>
<div id="getLoad">読み込んでいません（get）</div>

<br />

<h2>JSON</h2>
<p>JSON形式のデータを取得して変数に格納</p>
<div id="jsonLoad">読み込んでいません（JSON）</div>

テキストファイルの読み込みと操作

クリックするたびに引数の命令を交互に処理する".toggle"を使って、リンクテキストをクリックするとsample.txtの内容がid="txtLoad"の要素が交互に置き換わる様にjQueryを記述します。

以下のファイルを用意してください。
sample.txt

おめでとう！！テキストを読み込みました

$(function(){
	//テキストの読み込み
	//$("#txtLoad").load("DATA/sample.txt")

	$("#load").toggle(
		function(){
			//リンクをクリックするとsample.txtが読み込まれ、リセット用のリンクテキストが表示されます
			$(this).text("リセット")
			$("#txtLoad").load("DATA/sample.txt")
			},
		function(){
			//リセット用のテキストがクリックされた後の処理になります
			$(this).text("読み込む")
			$("#txtLoad").text("読み込んでいません")
	});
});

HTMLファイルの読み込みと操作

同様に、テキストファイルのときと同じ記述をすることでHTMLファイルを読み込むことができます。簡単な応用問題なので上の例題を参考にして書いてみましょう！！

以下のファイルを用意してください。
sample2.html

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

$(function(){
	//HTMLの読み込み
	$("#load2").toggle(function(){
		//リンクをクリックするとsample2.htmlが読み込まれ、リセット用のリンクテキストが表示されます
		$(this).text("リセット")
		$("#htmlLoad").load("DATA/sample2.html")
	},
	function(){
		//リセット用のテキストがクリックされた後の処理になります
		$(this).text("読み込み")
		$("#htmlLoad").text("読み込んでいません")
	});
});

getメソッドを使ったファイルの読み込みと操作

GETメソッドを使うことで外部ファイルに対してリクエストを送ります。jQuery.get( url, data, callback )などを使うことでHTTP(GET)通信でページを読み込むことができます。ここでは用意したテキスト形式のファイルをテーブル上に読み込んで点数表にしてみます。JavaScriptと同様に繰り返し構文のfor文を使ってタグを処理することができます。

以下のファイルを用意してください。
sample4.txt

80,95,100,40,75

$(function(){
	//DATA/sample4.txtのデータを変数dataに渡す
	$.get("DATA/sample4.txt",function(data){
		//変数を宣言
		//sample4.txtのデータを",（カンマ）"区切りで変数scoresに配列の状態で値を渡す
		var scores = data.split(",");
		var html = "";
		
		//<table>
		html += "<table border='1'>";
			html += "<tr>";
				html += "<th>番号</th>";
				html += "<th>得点</th>";
			html += "</tr>";
		
		//<tr><td>タグをfor文で繰り返し処理をする
		for ( var i = 0; i < scores.length; i++) {
			html += "<tr>";
				html += "<td>" + (i+1) + "</td>";
				html += "<td>" + scores[i] + "点</td>";
			html += "</tr>";
		
		//変数の宣言（合計点と平均点）
			total = parseInt(scores[i]);
			avg = total/scores.length;
		}
		
		//合計点の表示
			html += "<tr>";
				html += "<td>合計</td>";
				html += "<td>" + total + "点</td>";
			html += "</tr>";
		
		//平均点の表示
		html += "<tr>";
			html += "<td>平均</td>";
			html += "<td>" + avg + "点</td>";
		html += "</tr>";
		
		//</table>
		html += "</table>";
		
		//id＝getLoadに変数htmlを代入する
		$("#getLoad").html(html);
	});
});

JSON形式のファイルの読み込みと操作

JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットになっています。先程と同様にJSON形式のファイルからデータを読み込んで点数表にしてみます。

以下のファイルを用意してください。
sample6.json

[
	{"name":"山田","score":85},
	{"name":"田中","score":75},
	{"name":"鈴木","score":100}
]

$(function(){
	//DATA/sample6.jsonのデータを変数jsonに渡す
	$.getJSON("DATA/sample6.json",function(json){
		//変数の宣言
		var html = "";
		var total = 0;
		
		//<dl>
		html += "<dl>";
		
		//<dt>タグをfor文で繰り返し処理をする
		for ( var i = 0; i < json.length; i++) {
			html += "<dt>名前</dt>";
			html += "<dd>" + json[i].name + "</dd>";
			
			html += "<dt>点数</dt>";
			html += "<dd>" + json[i].score + "</dd>";
		
		//変数の宣言（合計点）
		total += json[i].score; 
		
		}
		
		//合計点の表示
		html += "<dt>合計点</dt>";
		html += "<dd>" + total + "</dd>";
		
		//</dl>
		html += "</dl>";
		
		//id＝jsonLoadに変数htmlを代入する
		$("#jsonLoad").html(html);
		
	});

	
});