Home > Developer > Web Develop

Display content with JS and transfer data using JSON

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

To do a project today, the requirement is that the div inside is empty all the code is written in <script> inside the,<script> inside the text with JSON transmission. This to me a just out of school, with Div wrote three years of the page is really very difficult, not to mention I did not know what JSON before I entered the company, I am very fortunate that I have colleagues in this company bring Me, teach me, there will not be able to ask them. Really feel that these three years have been white learning, learning knowledge can not be integrated with the community ...

Fortunately, finally in the tutorial and the help of colleagues to write out, the following paste the source code.

<! DOCTYPE html>

<meta charset= "Utf-8"/>
<title> Testing Projects </title>

<script src= "Js\newdot.js" ></script>

The key points here refer to the Dot.js library. This library needs to be downloaded by itself

<style>
#center {text-align:center;}
#test {text-align:left;}
</style>


<body>
<div class= "mytest" id= "MyTest" >

</div>
<script type= "Text/javascript" >
Window.onload = function () {
var temp = dot.template ($ ("#mytemp"). html ());
Define a temp to enable the label with ID mytemp to read dot. JS inside the content
var mes = dot.template ($ ("#mydot"). html ());
Define an MES so that a label with ID Mydot can read dot. JS inside the content
$ ("#mytest"). Append (MES);
Append the obtained value to the mytest Div.
$ ("#mytest"). Append (temp);
Append the obtained value to the mytest Div.
{
<!--define a json-->
var json = {
"Test": "Mail genuine MA Jill compression mask non-woven paper film 100-Pack bottle Mask Brush Spray Bottle new",<!--find a label with ID test to make the document content =test-->
"Test1": "Parcel mail or courier fee or happy holiday; Love Frankfurt pride Kraft kara L"
};
var obj = eval (JSON); <!--use function eval to convert a defined JSON to a JS object--
document.getElementById ("Test"). InnerHTML = json.test;<!--Output value--
document.getElementById ("Test1"). Innerhtml=json.test1;

}

};</script>

<script id= "Mydot" type= "Text/template" >

<table class= "Sui-table table-bordered" >
<thead>

<tr>

<th id= "center" > </th>
<th id= "center" > New Customer uv</th>
<th id= "center" > New customer Conversion rate (%) </th>
<th id= "center" > Old customer uv</th>
<th id= "center" > Old customer conversion rate (%) </th>

</tr>

</thead>
<tbody>
<tr>
&LT;TD id= "center" > Yesterday </td>
&LT;TD id= "center" >1.0</td>
&LT;TD id= "center" >15</td>
&LT;TD id= "center" >11</td>
&LT;TD id= "center" >1.3</td>
</tr>
<tr>
&LT;TD id= "center" > Prev </td>
&LT;TD id= "center" >1.1</td>
&LT;TD id= "center" >32</td>
&LT;TD id= "center" >32</td>
&LT;TD id= "center" >24</td>
</tr>
<tr>
&LT;TD id= "center" > Two days ago </td>
&LT;TD id= "center" >2.0</td>
&LT;TD id= "center" >24</td>
&LT;TD id= "center" >12.00</td>
&LT;TD id= "center" >1.25</td>
</tr>
<tr>
&LT;TD id= "center" > Industry average </td>
&LT;TD id= "center" >1.30</td>
&LT;TD id= "center" >21</td>
&LT;TD id= "center" >1.07</td>
&LT;TD id= "center" >1.40</td>
</tr>
<tr>
&LT;TD id= "center" > Current status </td>
&LT;TD id= "center" ><span class= "Sui-label label-warning" > Below average </span</td>
&LT;TD id= "center" ><span class= "Sui-label label-info" > Above average </span></td>
&LT;TD id= "center" ><span class= "Sui-label label-success" > Flat </span></td>
&LT;TD id= "center" ><span class= "Sui-label label-warning" > Below average </span></td>
</tr>
</tbody>
</table>
</script>
<script id= "mytemp" type= "Text/template" >
<table class= "Sui-table table-bordered" >
<thead>
<tr>
<th colspan= "5" >
<label class= "checkbox Pull-left" >
<input type= "checkbox" > Order Code: 7867473872181848
</label><span class= "Pull-right" > Deal time: 2014-01-11 11:59</span>
</th>
</tr>
</thead>
<tbody>
<tr>
&LT;TD width= "50%" >
<div class= "Typographic" >

<a href= "#" class= "Block-text" ><span id= "test" ><span></a>
<span>1</span>
<ul class= "unstyled" >
<li> after-sales </li>
<li> Complaint Sellers </li>
</ul>
</div>
</td>

&LT;TD rowspan= "2" width= "11%" class= "center" >56.50</td>
&LT;TD rowspan= "2" width= "13%" class= "Center" >
<ul class= "unstyled" >
<li> Trading Success </li>
<li><a href= "#" > Order Details </a></li>
<li><a href= "#" > Comments </a></li>
</ul>
</td>
&LT;TD rowspan= "2" width= "13%" class= "center" ><a href= "#" class= "BTN" > Reviews </a></td>
&LT;TD rowspan= "2" width= "13%" class= "Center" >
<ul class= "unstyled" >
<li><a href= "#" > Delete </a></li>
<li><a href= "#" > tags </a></li>
<li><a href= "#" > Share </a></li>
</ul>
</td>
</tr>
<tr>
&LT;TD width= "50%" >
<div class= "Typographic" >

<a id= "Test1" href= "#" class= "Block-text" ></a>
<span>1</span>
<ul class= "unstyled" >
<li> after-sales </li>
<li> Complaint Sellers </li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>

</script>

</body>

Use JS for content display, and use JSON to transfer data

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
display data from mysql database with html form and php how to display json data in php display data from mysql database using php data transfer calculator with latency php retrieve data from mysql and display display data from database in popup window using php how to display data from mysql using php

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More