jquery如何通过ajax请求获取后台数据显示在表格上-创新互联

这篇文章主要介绍jquery如何通过ajax请求获取后台数据显示在表格上，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1、引入bootstrap和jquery的cdn

2、html部分

 
  名字
  开始时间
  是否真实
  设备
 
 

3、js部分

1>使用for in

$(function(){
 $.ajax({
  url:'data.json',
  type:'get',
  dataType:'json',
  success:function(data){
   //方法中传入的参数data为后台获取的数据
   for(i in data.data) //data.data指的是数组，数组里是8个对象，i为数组的索引
   {
    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 通常用于对象
  遍历数组的两种方法(each,foreach)：

  $.each(arr,function(index,item){})

  arr.forEach(function(item,index))

 // arr为数组 ,index索引，item为当前值

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+'')
    })
   }
})})

总结：获取对象属性的方法：item.name或item['name']

jquery添加节点方法：

ul.append('

append:在之前添加li

prepend:在

之后添加li

before:在

之前添加li

after:在

之后添加li

-----延伸----

（1）将数据中is_true中的0转换为中文

采用三目运算或条件判断

item.is_true=parseInt(item.is_true)==0?'否':'是'
//注意数据是string类型需转换，且三目运算符返回的是结果不能写成item.is_true==0? item.is_true='否': item.is_true='是'

（2）将数据中device过滤只显示冒号以前的数据

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

split()分隔符方法用于把一个字符串分割成字符串数组

4.data.json文件

{
 "status": 0,
 "data": [ 
  { 
   
   "name": "天王盖地虎", 
   "startTime": "2017-03-02 00:00",
   "is_true":"0",
   "device": "SM-C9000:samsung"
  }, 
  { 
    
   "name": "宝塔镇河妖", 
   "startTime": "2017-03-02 00:00" ,
    "is_true":"0",
    "device": "SM705:smartisan"
  }, 
  { 
    
   "name": "锄禾日当午", 
   "startTime": "2017-03-02 00:00" ,
    "is_true":"0" ,
     "device": "EVA-AL00:HUAWEI"
   }
 ]
}

效果图：



jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

以上是“jquery如何通过ajax请求获取后台数据显示在表格上”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


分享名称：jquery如何通过ajax请求获取后台数据显示在表格上-创新互联
文章分享：http://www.cdkjz.cn/article/epige.html