The method by which jQuery reads the contents of the XML file
- 2020-05-12 02:10:01
- OfStack
This example shows how jQuery can read the contents of XML files. Share with you for your reference. The specific implementation method is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery read XML file </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1{color:Green;text-align:center;}
body{ background-color:#EEEEEE ; font-family: Microsoft jas black ; }
#showresult{width:600px;overflow:hidden;}
</style>
<script type="text/javascript" src="jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#read").click(function () {
$.ajax({
// Request mode: get
type: "GET",
//xml File location
url: "sitemap.xml",
// The returned data format is xml
dataType: "xml",
// Request the method to execute after successful completion
success: function (xml) {
$(xml).find("url").each(function (i) {
//i from 0 Start, add, and if you want to display all the data, remove the judgment
if (i < 10) {
// The link address
var location = $(this).find("loc").text();
// According to the text
var text = $(this).find("loc").text();
// Dynamic loading method : The link address
$("<a>").attr("href", location)
// According to the text
.text(text)
// Set the style
.css({ "width": "700px", "float": "left", "margin-bottom": "5px" })
// Loaded into the div
.appendTo("#showresult");
}
})
}
});
return false;
});
});
</script>
</head>
<body>
<div id="showresult">
<h1>jQuery read XML file </h1>
<a id="read" href="#" style="width:700px;"> Click read XML</a>
</div>
</body>
</html>
I hope this article is helpful for you to design jQuery program.