묻고답하기
jquery를 이용해서 xml파일내용을 불러오려고 하는데요
2013.12.29 01:28
xml 파일
<?xml version="1.0" encoding="utf-8" ?>
<RecentTutorials>
<Tutorial author="The Reddest">
<Title>Silverlight and the Netflix API</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>XAML</Category>
</Categories>
<Date>1/13/2009</Date>
</Tutorial>
<Tutorial author="The Hairiest">
<Title>Cake PHP 4 - Saving and Validating Data</Title>
<Categories>
<Category>Tutorials</Category>
<Category>CakePHP</Category>
<Category>PHP</Category>
</Categories>
<Date>1/12/2009</Date>
</Tutorial>
<Tutorial author="The Tallest">
<Title>Silverlight 2 - Using initParams</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>HTML</Category>
</Categories>
<Date>1/6/2009</Date>
</Tutorial>
<Tutorial author="The Fattest">
<Title>Controlling iTunes with AutoHotkey</Title>
<Categories>
<Category>Tutorials</Category>
<Category>AutoHotkey</Category>
</Categories>
<Date>12/12/2008</Date>
</Tutorial>
</RecentTutorials>
js 파일
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "jquery_xml.xml",
dataType: "xml",
success: function(xml) { parseXml(xml); }
});
});
function parseXml(xml)
{
//find every Tutorial and print the author
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).attr("author") + "<br />");
});
// Output:
// The Reddest
// The Harriest
// The Tallest
// The Fattest
//print the date followed by the title of each tutorial
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).find("Date").text());
$("#output").append(": " + $(this).find("Title").text() + "<br />");
});
// Output:
// 1/13/2009: Silverlight and the Netflix API
// 1/12/2009: Cake PHP 4 - Saving and Validating Data
// 1/6/2009: Silverlight 2 - Using initParams
// 12/12/2008: Silverlight 2 - Using initParams
//print each tutorial title followed by their categories
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).find("Title").text() + "<br />");
$(this).find("Category").each(function()
{
$("#output").append($(this).text() + "<br />");
});
$("#output").append("<br />");
});
// Output:
// Silverlight and the Netflix API
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// XAML
// Cake PHP 4 - Saving and Validating Data
// Tutorials
// CakePHP
// PHP
// Silverlight 2 - Using initParams
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// HTML
// Silverlight 2 - Using initParams
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// HTML
}
html파일
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>xmlparser</title>
<script src="jquery-1.10.2.min.js"></script>
<script src="SOTC-JQueryXML.js"></script>
</head>
<body>
<div id="output" class="output"></div>
</body>
</html>
이렇게 되어 있는데요
왜 html파일을 실행시키면 출력이 안되는지 모르겠습니다.. 도와주세요 ㅠㅠ
