Home > Developer > JavaScript
1. HTML
Sometimes, an HTML clip is saved in an HTML file. On the other homepage, the HTML file is read directly, and the HTML code snippet in the parsing is integrated into the home page.
Fragment.html file with the following content:
Copy codeThe Code is as follows:
<Div> hello Jquery </div>
On the homepage
Parse code in Test.html
Copy codeThe Code is as follows:
$ ("# A1"). click (function (){
$ ("# Div2" pai.load('fragment.html ');
Return false;
}); [Code]
2. JSON
The JSON file is test. json with the following content:
[Code]
[{"Name": "jim", "age": "20" },{ "name": "lily", "age": "18", "holobby ": ["swim", "movie"]}]
On the homepage
Parse code in Test.html
Copy codeThe Code is 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. holobby ){
Html + = '<td> ';
$. Each (entry. holobby, 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 content is:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Root>
<Book id = "1">
<Name> extjs </name>
<Author> Zhang San </author>
<Price> 88 </price>
</Book>
<Book id = "2">
<Name> sharp jQuery </name>
<Author> Li Si </author>
<Price> 99 </price>
</Book>
<Book id = "3">
<Name> introduction to flex </name>
<Author> Wang Wu </author>
<Price> 108 </price>
</Book>
<Book id = "4">
<Name> java Programming ideology </name>
<Author> Qian Qi </author>
<Price> 128 </price>
</Book>
</Root>
On the homepage
Parse code in Test.html
Copy codeThe Code is 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> ";
});
Certificate ('audio div2'audio .html (s );
});
});
The original code of test.html is
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<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" pai.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. holobby ){
Html + = '<td> ';
$. Each (entry. holobby, 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> ";
});
Certificate ('audio div2'audio .html (s );
});
});
});
</Script>
</Head>
<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>
</Html>
Click the first hyperlink to display the newly inserted html clip in the Show Content area.
Click the second hyperlink to display json data:
Click the third hyperlink to display the xml data:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
