jquery 通过ajax请求获取后台数据显示在表格上的方法

 更新时间:2018年08月08日 09:19:50   作者:cyyy1223  
今天小编就为大家分享一篇jquery 通过ajax请求获取后台数据显示在表格上的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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>开始时间</th>
  <th>是否真实</th>
  <th>设备</th>
 </tr>
 </table>

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='<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 通常用于对象
  遍历数组的两种方法(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='<td>'+item.name+'</td>'+'<td>'+item.startTime+'</td>'+'<td>'+item.is_true+'</td>'+'<td>'+item.device+'</td>';
     $("#tabletest").append('<tr>'+tr+'</tr>')
    })
   }
})})

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

jquery添加节点方法:

ul.append('<li>'+哈哈+'</li>')

append:在</ul>之前添加li

prepend:在<ul>之后添加li

before:在<ul>之前添加li

after:在</ul>之后添加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 通过ajax请求获取后台数据显示在表格上的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery实现可拖拽3D万花筒旋转特效

    jQuery实现可拖拽3D万花筒旋转特效

    本文主要介绍了使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。下面跟着小编一起来看下吧
    2017-01-01
  • 浅谈jQuery中replace()方法

    浅谈jQuery中replace()方法

    这篇文章主要介绍了jQuery中replace()方法用法,实例分析了replace()方法的功能、定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下
    2015-05-05
  • Jquery实现无缝向上循环滚动列表的特效

    Jquery实现无缝向上循环滚动列表的特效

    今天小编就为大家分享一篇关于Jquery实现无缝向上循环滚动列表的特效,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 实现jquery放大镜的两种方法

    实现jquery放大镜的两种方法

    本篇文章给大家详细分析了用jquery实现放大镜效果的方法,以及代码分享,有兴趣的学习下。
    2018-02-02
  • jQuery实现动态粒子效果

    jQuery实现动态粒子效果

    这篇文章主要为大家详细介绍了jQuery实现动态粒子效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • jquery 图片 上一张 下一张 链接效果(续篇)

    jquery 图片 上一张 下一张 链接效果(续篇)

    很久没写文章了,这段时间一直在做类似鲜果的一个应用和数据采集,还有就是对企业和个人成长的思考。
    2010-04-04
  • jQuery中jqGrid分页实现代码

    jQuery中jqGrid分页实现代码

    今天看到javaeye上有人使用了jqGrid实现了数据的分页,参考它的代码,实现了这个功能,搬出来晒晒,作为自己以后学习的资料
    2011-11-11
  • jQuery学习笔记之jQuery动画效果

    jQuery学习笔记之jQuery动画效果

    本次学习分为两个文件的测试,第一个是基本动画,第二个是滑动和透明动画效果,分别如下
    2013-09-09
  • jquery学习笔记 用jquery实现无刷新登录

    jquery学习笔记 用jquery实现无刷新登录

    为了防止以后好久不用生疏,在这里记下,供刚开始学习jquery的童鞋们借鉴,我也是刚开始学jquery,有什么写的不对的地方,还请大家指出错误,共同进步。
    2011-08-08
  • jQuery1.4.2与老版本json格式兼容的解决方法

    jQuery1.4.2与老版本json格式兼容的解决方法

    原来使用jQuery1.3.2编写的代码,更换到1.4.2后,使用jQuery.ajax()加载的json文件,不能正常加载。(使用jQuery.getJSON()也一样)
    2011-02-02

最新评论