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

自2013年創(chuàng)立以來創(chuàng)新互聯(lián)專注于”幫助中小企業(yè)+互聯(lián)網(wǎng)”, 也是目前成都地區(qū)具有實(shí)力的互聯(lián)網(wǎng)服務(wù)商。團(tuán)隊(duì)致力于為企業(yè)提供--站式網(wǎng)站建設(shè)、移動(dòng)端應(yīng)用( H5手機(jī)營銷、成都App制作、微信開發(fā))、軟件開發(fā)、信息化解決方案等服務(wù)。

1、引入bootstrap和jquery的cdn

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.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>開始時(shí)間</th>
  <th>是否真實(shí)</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為后臺(tái)獲取的數(shù)據(jù)
   for(i in data.data) //data.data指的是數(shù)組，數(shù)組里是8個(gè)對(duì)象，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 通常用于對(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='<td>'+item.name+'</td>'+'<td>'+item.startTime+'</td>'+'<td>'+item.is_true+'</td>'+'<td>'+item.device+'</td>';
     $("#tabletest").append('<tr>'+tr+'</tr>')
    })
   }
})})

總結(jié)：獲取對(duì)象屬性的方法：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過濾只顯示冒號(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è)簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、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è)資訊頻道！

當(dāng)前名稱：jquery如何通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上-創(chuàng)新互聯(lián)
分享URL：http://chinadenli.net/article14/epige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、定制開發(fā)、網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)