jquery 通过ajax请求获取后台数据显示在表格上的方
网络编程 2021-07-04 16:46www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇jquery 通过ajax请求获取后台数据显示在表格上的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
1、引入bootstrap和jquery的cdn
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss./bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" > <script type="text/javascript" src="https://cdn.bootcss./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', suess: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', suess: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请求获取后台数据显示在表格上的方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程