这篇文章主要介绍jquery如何通过ajax请求获取后台数据显示在表格上,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
自2013年创立以来创新互联专注于”帮助中小企业+互联网”, 也是目前成都地区具有实力的互联网服务商。团队致力于为企业提供--站式网站建设、移动端应用( H5手机营销、成都App制作、微信开发)、软件开发、信息化解决方案等服务。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:在
before:在
after:在
-----延伸----
(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请求获取后台数据显示在表格上”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!