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 相关文章推荐
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现简单评论区功能
Oct 26 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
写出高质量的PHP程序
2012/02/04 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
为你总结一些php信息函数
2015/10/21 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python实现多线程的两种方式
2016/05/22 Python
django初始化数据库的实例
2018/05/27 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
python exit出错原因整理
2020/08/31 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
财务会计人员岗位职责
2013/11/30 职场文书
应用英语专业自荐信
2014/01/26 职场文书
小学生元旦广播稿
2014/02/21 职场文书
先进员工事迹材料
2014/12/20 职场文书
金陵十三钗观后感
2015/06/04 职场文书
《灰雀》教学反思
2016/02/19 职场文书
Python日志模块logging用法
2022/06/05 Python