這篇文章主要介紹jquery如何通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

十載的陽泉網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整陽泉建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“陽泉網(wǎng)站設(shè)計(jì)”,“陽泉網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1、引入bootstrap和jquery的cdn

2、html部分

 
  名字
  開始時(shí)間
  是否真實(shí)
  設(shè)備
 
 

3、js部分

1>使用for in

$(function(){
 $.ajax({
  url:'data.json',
  type:'get',
  dataType:'json',
  success:function(data){
   //方法中傳入的參數(shù)data為后臺(tái)獲取的數(shù)據(jù)
   for(i in data.data) //data.data指的是數(shù)組，數(shù)組里是8個(gè)對(duì)象，i為數(shù)組的索引
   {
    var tr;
    tr=''+data.data[i].name+''+''+data.data[i].startTime+''+''+data.data[i].is_true+''+''+data.data[i].device+''
    $("#tabletest").append(''+tr+'')
   }
  }
 })
})

 ***注意**** for in 通常用于對(duì)象
  遍歷數(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=''+item.name+''+''+item.startTime+''+''+item.is_true+''+''+item.device+'';
     $("#tabletest").append(''+tr+'')
    })
   }
})})

總結(jié)：獲取對(duì)象屬性的方法：item.name或item['name']

jquery添加節(jié)點(diǎn)方法：

ul.append('

append:在之前添加li

prepend:在

之后添加li

before:在

之前添加li

after:在

之后添加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過濾只顯示冒號(hào)以前的數(shù)據(jù)

item.is_true=parseInt(item.is_true)==0?'否':'是'
var arr=item.device.split(":")
item.device=arr[0]

split()分隔符方法用于把一個(gè)字符串分割成字符串?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是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

以上是“jquery如何通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


網(wǎng)頁名稱：jquery如何通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上
本文來源：http://weahome.cn/article/ihphgp.html