感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryでXMLを読み込んで、画面に表示するサンプル

<スポンサーリンク>

以下のようなXMLファイルを読み込みたい。

<?xml version="1.0" encoding="utf-8" ?>

<friend_list>
	<friend gender="male">
		<name>sho322</name>
		<job>Engineer</job>
		<interests>
			<interest>programming</interest>
			<interest>swimming</interest>
			<interest>jogging</interest>
		</interests>
	</friend>

	<friend gender="female">
		<name>hanako</name>
		<job>designer</job>
		<interests>
			<interest>flower</interest>
			<interest>trip</interest>
			<interest>camera</interest>
		</interests>
	</friend>
</friend_list>

友達の一覧と、その性別や名前、趣味のデータだ。
このXMLを読み込んで表示させるjQueryサンプルは以下の通り。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(window).load(function() {
	console.log("test");
	$.ajax({
		type: "GET",
		url: "friend.xml",
		dataType: "xml",
		success: function(xml) {
			console.log("success");
			console.log(xml);
			readXML(xml);
		},
		error: function(xml) {
			console.log("fail");
		} 
	});
});
</script>
</head>
<body>

<script type="text/javascript">
function readXML(xml) {
	$(xml).find("friend").each(function() {
		$("#result").append("<h2>" + $(this).find("name").text() + "</h2>");
		$("#result").append("性別:" + $(this).attr("gender") + "</br>");
		$("#result").append("<p>趣味</p>");
		$("#result").append("<ul>");
		$(this).find("interest").each(function() {
			$("#result").append("<li>" + $(this).text() + "</li>");
		});
		$("#result").append("</ul>");
		$("#result").append("<hr>");

	});
}
</script>

<h1>この下にXMLの内容が表示されます</h1>
<div id="result"></div>
</body>
</html>

これを実行すると、ブラウザには以下のような感じでXMLの内容が表示される。

この下にXMLの内容が表示されます

sho322

性別:male
趣味

programming
swimming
jogging
hanako

性別:female
趣味

flower
trip
camera

参考にした本


色んなサンプルが載っていてコンパクトに勉強できる。

感謝のプログラミング

今回で感謝のプログラミングは【521時間目】
10000時間まで、あと【9479時間】