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


Posted in jQuery onAugust 08, 2018

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 通过ajax请求获取后台数据显示在表格上的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
PHP实现服务器状态监控的方法
2014/12/09 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
对Python _取log的几种方式小结
2019/07/25 Python
如何使用repr调试python程序
2020/02/28 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
资源环境与城市管理专业推荐信
2013/11/30 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
酒店节能减排方案
2014/05/26 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
Promise静态四兄弟实现示例详解
2022/07/07 Javascript