jquery 通過ajax請求獲取后臺數(shù)據(jù)顯示在表格上的方法
1、引入bootstrap和jquery的cdn
<link rel="stylesheet" type="text/css" rel="external nofollow" > <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>
2、html部分
<table class="table table-bordered" id='tabletest'> <tr> <th>名字</th> <th>開始時間</th> <th>是否真實</th> <th>設(shè)備</th> </tr> </table>
3、js部分
1>使用for in
$(function(){ $.ajax({ url:'data.json', type:'get', dataType:'json', success:function(data){ //方法中傳入的參數(shù)data為后臺獲取的數(shù)據(jù) for(i in data.data) //data.data指的是數(shù)組,數(shù)組里是8個對象,i為數(shù)組的索引 { var tr; tr='<td>'+data.data[i].name+'</td>'+'<td>'+data.data[i].startTime+'</td>'+'<td>'+data.data[i].is_true+'</td>'+'<td>'+data.data[i].device+'</td>' $("#tabletest").append('<tr>'+tr+'</tr>') } } }) })
***注意**** for in 通常用于對象 遍歷數(shù)組的兩種方法(each,foreach): $.each(arr,function(index,item){}) arr.forEach(function(item,index)) // arr為數(shù)組 ,index索引,item為當(dāng)前值
2>each方法
$(function(){ $.ajax({ url:'data.json', type:'get', dataType:'json', success:function(data){ $.each(data.data,function(index,item){ var tr; tr='<td>'+item.name+'</td>'+'<td>'+item.startTime+'</td>'+'<td>'+item.is_true+'</td>'+'<td>'+item.device+'</td>'; $("#tabletest").append('<tr>'+tr+'</tr>') }) } })})
總結(jié):獲取對象屬性的方法:item.name或item['name']
jquery添加節(jié)點(diǎn)方法:
ul.append('<li>'+哈哈+'</li>')
append:在</ul>之前添加li
prepend:在<ul>之后添加li
before:在<ul>之前添加li
after:在</ul>之后添加li
-----延伸----
(1)將數(shù)據(jù)中is_true中的0轉(zhuǎn)換為中文
采用三目運(yùn)算或條件判斷
item.is_true=parseInt(item.is_true)==0?'否':'是' //注意數(shù)據(jù)是string類型需轉(zhuǎn)換,且三目運(yùn)算符返回的是結(jié)果不能寫成item.is_true==0? item.is_true='否': item.is_true='是'
(2)將數(shù)據(jù)中device過濾只顯示冒號以前的數(shù)據(jù)
item.is_true=parseInt(item.is_true)==0?'否':'是' var arr=item.device.split(":") item.device=arr[0]
split()分隔符方法用于把一個字符串分割成字符串?dāng)?shù)組
4.data.json文件
{ "status": 0, "data": [ { "name": "天王蓋地虎", "startTime": "2017-03-02 00:00", "is_true":"0", "device": "SM-C9000:samsung" }, { "name": "寶塔鎮(zhèn)河妖", "startTime": "2017-03-02 00:00" , "is_true":"0", "device": "SM705:smartisan" }, { "name": "鋤禾日當(dāng)午", "startTime": "2017-03-02 00:00" , "is_true":"0" , "device": "EVA-AL00:HUAWEI" } ] }
效果圖:
以上這篇jquery 通過ajax請求獲取后臺數(shù)據(jù)顯示在表格上的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)可拖拽3D萬花筒旋轉(zhuǎn)特效
本文主要介紹了使用了CSS3立體效果的強(qiáng)大特效,本特效使用jQuery跟CSS3 transform來實現(xiàn)在用戶鼠標(biāo)按下拖動時,環(huán)形圖片墻可以跟隨鼠標(biāo)進(jìn)行3D旋轉(zhuǎn)動畫。下面跟著小編一起來看下吧2017-01-01Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效
今天小編就為大家分享一篇關(guān)于Jquery實現(xiàn)無縫向上循環(huán)滾動列表的特效,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-02-02jquery 圖片 上一張 下一張 鏈接效果(續(xù)篇)
很久沒寫文章了,這段時間一直在做類似鮮果的一個應(yīng)用和數(shù)據(jù)采集,還有就是對企業(yè)和個人成長的思考。2010-04-04jQuery學(xué)習(xí)筆記之jQuery動畫效果
本次學(xué)習(xí)分為兩個文件的測試,第一個是基本動畫,第二個是滑動和透明動畫效果,分別如下2013-09-09jquery學(xué)習(xí)筆記 用jquery實現(xiàn)無刷新登錄
為了防止以后好久不用生疏,在這里記下,供剛開始學(xué)習(xí)jquery的童鞋們借鑒,我也是剛開始學(xué)jquery,有什么寫的不對的地方,還請大家指出錯誤,共同進(jìn)步。2011-08-08