jquery parsing HTML, JSON, and XML instances _jquery

Source: Internet
Author: User

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:

<div>hello jquery</div>

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.