js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)
來(lái)源:易賢網(wǎng) 閱讀:1113 次 日期:2016-07-19 16:09:47
溫馨提示:易賢網(wǎng)小編為您整理了“js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)”,方便廣大網(wǎng)友查閱!

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)內(nèi)容顯示并使用json傳輸數(shù)據(jù)的方法,感興趣的小伙伴們可以參考一下

最近做一個(gè)項(xiàng)目,要求是div內(nèi)為空 所有代碼都寫(xiě)在<script>里面,<script>里面的文本用json傳輸,這個(gè)問(wèn)題對(duì)于我來(lái)說(shuō)有些困難。

還好,最后在教程和同事的幫助下寫(xiě)出來(lái)了,下面貼上源代碼。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>測(cè)試項(xiàng)目</title>

<script src="js\newdoT.js"></script>

//關(guān)鍵點(diǎn)在這里 引用dot.js這個(gè)庫(kù)。這個(gè)庫(kù)需要自己下載

<style>

#center{text-align: center;}

#test{text-align: left;}

</style>

</head>

<body>

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

</div>

<script type="text/javascript">

window.onload = function() {

var temp = doT.template($("#mytemp").html());

//定義一個(gè)temp使id為mytemp的標(biāo)簽可以讀取dot.JS內(nèi)的內(nèi)容

var mes = doT.template($("#mydot").html());

//定義一個(gè)mes使id為mydot的標(biāo)簽可以讀取dot.JS內(nèi)的內(nèi)容

$("#mytest").append(mes);

//將獲取的值追加到mytest這個(gè)div中

$("#mytest").append(temp);

//將獲取的值追加到mytest這個(gè)div中

{

<!--定義一個(gè)json-->

var json = {

"test": "包郵 正品瑪姬兒壓縮面膜無(wú)紡布紙膜100粒 送泡瓶面膜刷噴瓶 新款",<!--找到id為test的標(biāo)簽,使文檔內(nèi)容=test-->

"test1":"包郵 還是快遞費(fèi)還是快樂(lè)放假了;愛(ài)上法蘭克福驕傲了卡夫卡拉升"

};

// var obj = eval(json); <!--使用函數(shù)eval將定義的json轉(zhuǎn)化為js對(duì)象-->

document.getElementById("test").innerHTML = json.test;<!--輸出值-->

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">新客戶(hù)uv</th>

<th id="center">新客戶(hù)轉(zhuǎn)化率(%)</th>

<th id="center">老客戶(hù)uv</th>

<th id="center">老客戶(hù)轉(zhuǎn)化率(%)</th>

</tr>

</thead>

<tbody>

<tr>

<td id="center">昨日</td>

<td id="center">1.0</td>

<td id="center">15</td>

<td id="center">11</td>

<td id="center">1.3</td>

</tr>

<tr>

<td id="center">前日</td>

<td id="center">1.1</td>

<td id="center">32</td>

<td id="center">32</td>

<td id="center">24</td>

</tr>

<tr>

<td id="center">兩天前</td>

<td id="center">2.0</td>

<td id="center">24</td>

<td id="center">12.00</td>

<td id="center">1.25</td>

</tr>

<tr>

<td id="center">行業(yè)平均</td>

<td id="center">1.30</td>

<td id="center">21</td>

<td id="center">1.07</td>

<td id="center">1.40</td>

</tr>

<tr>

<td id="center">當(dāng)前現(xiàn)狀</td>

<td id="center"><span class="sui-label label-warning">低于平均</span</td>

<td id="center"><span class="sui-label label-info">高于平均</span></td>

<td id="center"><span class="sui-label label-success">持平</span></td>

<td id="center"><span class="sui-label label-warning">低于平均</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">訂單編號(hào):7867473872181848

</label><span class="pull-right">成交時(shí)間:2014-01-11 11:59</span>

</th>

</tr>

</thead>

<tbody>

<tr>

<td width="50%">

<div class="typographic">

<img src="http://img04.taobaocdn.com/bao/uploaded/i4/13558026493775867/T1Cs8lFipeXXXXXXXX_!!0-item_pic.jpg_80x80.jpg">

<a href="#" class="block-text"><span id="test"><span></a>

<span>1</span>

<ul class="unstyled">

<li>申請(qǐng)售后</li>

<li>投訴賣(mài)家</li>

</ul>

</div>

</td>

<td rowspan="2" width="11%" class="center">56.50</td>

<td rowspan="2" width="13%" class="center">

<ul class="unstyled">

<li>交易成功</li>

<li><a href="#">訂單詳情</a></li>

<li><a href="#">對(duì)方已評(píng)</a></li>

</ul>

</td>

<td rowspan="2" width="13%" class="center"><a href="#" class="btn">評(píng)價(jià) </a></td>

<td rowspan="2" width="13%" class="center">

<ul class="unstyled">

<li><a href="#">刪除</a></li>

<li><a href="#">標(biāo)記</a></li>

<li><a href="#">分享</a></li>

</ul>

</td>

</tr>

<tr>

<td width="50%">

<div class="typographic">

<img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1hxekXw8dXXXXXXXX_!!0-item_pic.jpg_80x80.jpg">

<a id="test1" href="#" class="block-text"></a>

<span>1</span>

<ul class="unstyled">

<li>申請(qǐng)售后</li>

<li>投訴賣(mài)家</li>

</ul>

</div>

</td>

</tr>

</tbody>

</table>

</script>

</body>

</html>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
咨詢(xún)QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)