1, HTML
Sometimes an HTML fragment is saved in an HTML file, the HTML file is read directly on another main page, and the HTML snippet inside is parsed into the main page.
fragment.html file, its contents:
Copy Code code as follows:
On the main page
Parsing code in test.html
Copy Code code as follows:
$ ("#a1"). Click (function () {
$ ("#div2"). Load (' fragment.html ');
return false;
}); [Code]
2, JSON
The JSON file is Test.json, and its contents:
[Code]
[{' Name ': ' Jim ', ' Age ': '},{' name ': ' Lily ', ' age ': ' A ', ' hobby ': ["Swim ', ' movie ']}]
On the main page
Parsing code in test.html
Copy Code code as follows:
$ ("#a2"). Click (function () {
$.getjson (' Test.json ', function (data) {
var html = ' <table> ';
$.each (Data,function (entryindex,entry) {
html = ' <tr><td> ' +entry.name+ ' </td><td> ' +entry.age+ ' </td> ';
if (entry.hobby) {
HTML + = ' <td> ';
$.each (Entry.hobby, function (lineindex,line) {
HTML + line+ ",";
});
HTML + = ' </td> ';
}
HTML + = ' </tr> ';
});
HTML + = ' </table> ';
$ ("#div2"). HTML (HTML);
return false;
});
});
3, XML
The XML file is Test.xml, and its contents are:
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<root>
<book id= "1" >
<name> extjs</name>
<author> John </author>
<price>88</price>
</book>
<book id= "2" >
<name> Sharp Jquery</name>
<author> Dick </author>
<price>99</price>
</book>
<book id= "3" >
<name> flex</name>
<author> Harry </author>
<price>108</price>
</book>
<book id= "4" >
<name>java Programming Ideas </name>
<author> Money Seven </author>
<price>128</price>
</book>
</root>
On the main page
Parsing code in test.html
Copy Code code as follows:
$ ("#a3"). Click (function () {
$.get (' Test.xml ', function (data) {
var s= "";
$ (data). Find ("book"). each (function (i) {
var id=$ (this). attr (' id ');
var name=$ (this). Children (' name '). text ();
var author=$ (this). Children (' author '). text ();
var price=$ (this). Children (' price '). Text ();
s+=id+ "+name+" "+author+" "+price+" "<br>";
});
$ (' #div2 '). HTML (s);
});
});
To jquery parsing different documents made a demo,test.html the original code is
Copy Code code as follows:
<title></title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#a1"). Click (function () {
$ ("#div2"). Load (' fragment.html ');
return false;
});
$ ("#a2"). Click (function () {
$.getjson (' Test.json ', function (data) {
var html = ' <table> ';
$.each (Data,function (entryindex,entry) {
html = ' <tr><td> ' +entry.name+ ' </td><td> ' +entry.age+ ' </td> ';
if (entry.hobby) {
HTML + = ' <td> ';
$.each (Entry.hobby, function (lineindex,line) {
HTML + line+ ",";
});
HTML + = ' </td> ';
}
HTML + = ' </tr> ';
});
HTML + = ' </table> ';
$ ("#div2"). HTML (HTML);
return false;
});
}); $ ("#a3"). Click (function () {
$.get (' Test.xml ', function (data) {
var s= "";
$ (data). Find ("book"). each (function (i) {
var id=$ (this). attr (' id ');
var name=$ (this). Children (' name '). text ();
var author=$ (this). Children (' author '). text ();
var price=$ (this). Children (' price '). Text ();
s+=id+ "+name+" "+author+" "+price+" "<br>";
});
$ (' #div2 '). HTML (s);
});
});
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<ul id= "Div1" >
<li><a id= "A1" href= "#" >show HTML fragment</a></li>
<li><a id= "A2" href= "#" >show json</a></li>
<li><a id= "A3" href= "#" >show xml</a></li>
</ul>
<p>show content:</p>
<div id = "Div2" ></div>
</form>
<div>
</div>
</body>
Using the Firefox browser to open the Test.html file, the effect is as follows
Click the first hyperlink to display the newly inserted HTML fragment in the Show content area
Click the second hyperlink to display the JSON data:
Click the third hyperlink to display the XML data:
PS: Here is a few more on the JSON and XML operations online tools for your reference to use:
Online Xml/json Mutual Conversion tool:
Http://tools.jb51.net/code/xmljson
Online format xml/on-line compression of XML:
Http://tools.jb51.net/code/xmlformat
XML online compression/formatting tool:
http://tools.jb51.net/code/xml_format_compress
Online JSON code inspection, inspection, landscaping, formatting tools:
Http://tools.jb51.net/code/json
JSON Online formatting tool:
Http://tools.jb51.net/code/jsonformat
