1. Note The $.ajax attribute datatype: ' XML '
2.Java out.println in Response.setcontenttype ("Text/xml"), also must be in XML format
3. Parsing an XML document is the same as parsing the DOM, you can use the Find (), children () function to parse and use each () method to traverse, in addition to the text () and the attr () method to get the node texts and properties.
1. Read XML documents directly
| The code is as follows |
Copy Code |
<?xml version= "1.0" encoding= "Utf-8"?>
<books>
<book title= "Tibet Code" imageurl= "Images/tibet_code.jpg" >
<description>
Here is the overview (www.111cn.net)
</description>
</book> <book title= "Cambridge IELTS 6" imageurl= "Images/ielts.jpg" >
<description>
Here is the overview (www.111cn.net)
</description>
</book> <book title= "Professional asp.net" imageurl= "images/asp.jpg" >
<description>
Here is the overview (www.111cn.net)
</description>
</book>
</books> |
jquery Code
| The code is as follows |
Copy Code |
$ (document). Ready (function ()
{
$.get (' XMLFile.xml ', function (d) {
$ (' body '). Append (' <h1> Saturn to recommend some books to you: </h1> ');
$ (' body '). Append (' <dl/> ');
$ (d). Find ("book"). each (function () {
var $book = $ (this);
var title = $book. attr ("title");
var description = $book. Find (' description '). Text ();
var ImageUrl = $book. attr (' ImageUrl ');
var html = ' <dt> <img class= ' bookimage "alt=" "src=" ' + ImageUrl + ' "mce_src=" ' + ImageUrl + ' "/> </dt> ;';
html = ' <dd> <span class= ' loadingpic ' alt= ' Loading '/> ';
html + + ' <p class= ' title ' > ' + title + ' </p> ';
html + + ' <p> ' + description + ' </p> ';
HTML + = ' </dd> ';
$ (' DL '). Append ($ (HTML));
$ ('. Loadingpic '). fadeout (2000);
});
});
});
|
2. Based on jquery Ajax examples
| The code is as follows |
Copy Code |
| function Standardtaxrate ()
{
$.ajax ({
URL: "/resource/xml.php",
DataType: ' xml ',
Type: ' Get ',
timeout:2000,
Error:function (XML)
{
Alert ("Error loading XML file!") ");
},
Success:function (XML)
{
$ (XML). Find ("TaxRate"). each (function (i)
{
var oid = $ (this). attr ("id");
var lower = $ (this). Children ("lower"). Text ();
var upper = $ (this). Children ("upper"). Text ();
var rate = $ (this). Children ("rate"). Text ();
var buckle = $ (this). Children ("buckle"). Text ();
Subsequent operation ...
});
}
});
} |
xml.php just return XML format data
| The code is as follows |
Copy Code |
| <?xml version= "1.0" encoding= "Utf-8"?>
<taxrates>
<taxrate id= "1" >
<lower>0</lower>
<upper>500</upper>
<rate>5</rate>
<buckle>0</buckle>
</taxrate>
<taxrate id= "2" >
<lower>500</lower>
<upper>2000</upper>
<rate>10</rate>
<buckle>25</buckle>
</taxrate>
<taxrate id= "3" >
<lower>2000</lower>
<upper>5000</upper>
<rate>15</rate>
<buckle>125</buckle>
</taxrate>
<taxrate id= "4" >
<lower>5000</lower>
<upper>20000</upper>
<rate>20</rate>
<buckle>375</buckle>
</taxrate>
<taxrate id= "5" >
<lower>20000</lower>
<upper>40000</upper>
<rate>25</rate>
<buckle>1375</buckle>
</taxrate>
<taxrate id= "6" >
<lower>40000</lower>
<upper>60000</upper>
<rate>30</rate>
<buckle>3375</buckle>
</taxrate>
<taxrate id= "7" >
<lower>60000</lower>
<upper>80000</upper>
<rate>35</rate>
<buckle>6375</buckle>
</taxrate>
<taxrate id= "8" >
<lower>80000</lower>
<upper>100000</upper>
<rate>40</rate>
<buckle>10375</buckle>
</taxrate>
<taxrate id= "9" >
<lower>100000</lower>
<upper>99999999</upper>
<rate>45</rate>
<buckle>15375</buckle>
</taxrate>
</taxrates> |
3. Read and display XML content
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Read and display XML content </title>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type= "Text/javascript" ></ Script>
<body>
<div id= "Error" ></div>
</body>
Css <style>
#body {margin:0; padding:0; padding-top:10px;}
#book {width:98% height:auto; margin:0 auto; font-size:12px; text-indent:10px; color: #333; line-height:20px; Border-bottom:solid 1px #ccc; padding-bottom:10px; margin-bottom:10px; }
#book. Price {font-family: "Microsoft Ya hei"; font-size:14px; font-weight:900; color: #f00;}
#error {width:98%; height:36px; line-height:36px; margin:0 auto; margin-bottom:10px; color: #fff; font-size:12px; Text-align:left; text-indent:20px; Background: #f60; Display:none; }
#error a {text-decoration:none; color: #fff;}
#error a:hover {Text-decoration:underline}
</style> |
Jquery
| The code is as follows |
Copy Code |
| <script>
Load the following when page load completes
$ (window). Load (function () {
Loadxml ();
});
Var
Bid
Btitle,
Bname,
Bdescription,
Bprice,
Btime,
html
Load and display XML element content
function Loadxml () {
$ (' #error '). Text (' Loading book contents, please wait ... '). Show ();
$.ajax ({
URL: ' Book.xml ',
Cache:false,
DataType: "xml",
Type: ' Get ',
timeout:4000,
Error:function (data) {
$ (' #error '). HTML (' ERROR: Book list failed to load! <a href= "javascript:;" onclick= "Loadxml ();" > Click Reload </a> ');
},
Success:function (data) {
$ (' Body #book '). Remove ();
$ (data). Find (' BS '). each (function (i) {
Bid = $ (this). attr (' id '); Using the attr method to get the BS element ID
Btitle = $ (this). Children (' title '). Text (); Gets the child element content of the current element by using the children method
Bname = $ (this). Children (' name '). text ();
Bdescription = $ (this). Children (' description '). Text ();
Bprice = $ (this). Children (' price '). Text ();
Btime = $ (this). Children (' time '). text ();
html = ' <div id= ' book ' style= ' Display:none; > '
+ ' <div> #: ' +bid+ ' </div> '
+ ' <div> title: ' +btitle+ ' </div> '
+ ' <div> Author: ' +bname+ ' </div> '
+ ' <div> introduction: ' +bdescription+ ' </div> '
+ ' <div> Price: ￥ ' +bprice+ ' </div> '
+ ' <div> time: ' +btime+ ' </div> '
+ ' </div> ';
$ (' body '). Append (HTML); Append content to Body
$ (' Body #book '). Slidedown (' fast '); Slide down Pull effect display
});
$ (' #error '). html (' book List loaded successfully! A total of ' +$ (' body #book ') was loaded. Size () + ' This book <a href= ' javascript:; "onclick=" Loadxml (); " > Click Reload </a> ');
}
});
}
</script> |
The returned XML document
| The code is as follows |
Copy Code |
| <?xml version= "1.0" encoding= "Utf-8"?>
<! DOCTYPE Note SYSTEM "NOTE.DTD" >
<b:book xmlns:b= "http://localhost" >
<bs id= "1" >
<title> How steel is tempered </title>
<name> Nicolas Ostrovsky </name>
<description> How steel is tempered is a novel by former Soviet writer Nicolas Ostrovsky ... </description>
<price>39.9</price>
<time>2012-03-20</time>
</bs>
<bs id= "2" >
<TITLE>2015 New Postgraduate English reading comprehension 150 </title>
<name> Mr. Zeng, Zhang Jian, Liu Xiaoying King Orchid School </name>
<description> Zhang Jian, ph. D., graduated from the Department of British Literature at Glasgow University, professor of English College, Beijing Foreign Studies University, and associate dean of English school ...</description>
<price>31.30</price>
<time>2012-03-15</time>
</bs>
<bs id= "3" >
<title> Cultural Bitter Tour (New edition) (with Calligraphy edition) </title>
<name> Yu Qiuyu </name>
The Book of <description> Culture Bitter Brigade was first published in 1992, which was written by Yu Qiuyu in his lectures and expeditions at home and abroad in the 1980 ...</description>
<price>27.60</price>
<time>2012-03-17</time>
</bs>
<bs id= "4" >
<title> Lung response to Taiwan's family of Works series (a total of 3 albums) </title>
<name> Dragon Counter, Andre </name>
<description> 15 years ago, the Dragon's desk wrote "Baby You take your time" with a mother's personal experience ...</description>
<price>63.50</price>
<time>2012-03-16</time>
</bs>
<bs id= "5" >
<title> the great people who influence the world Big 32 open 20 volumes </title>
<name> Translation Center Book franchise Store </name>
<description> every great man with the world's influence has a deeply moving story. Their rich experience and life experience ...</description>
<price>355.00</price>
<time>2012-03-19</time>
</bs>
</b:book> |
