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表单验证之密码确认
May 22 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
基于jQuery实现可编辑的表格
Dec 11 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开发框架总结收藏
2008/04/24 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
angularJS开发注意事项
2018/05/26 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
Python中super关键字用法实例分析
2015/05/28 Python
Django中使用locals()函数的技巧
2015/07/16 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python实现五子棋小游戏
2020/03/25 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
厨师岗位职责
2013/11/12 职场文书
商务经理岗位职责
2014/07/30 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
欢迎词范文
2015/01/27 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
德劲DE1108畅想
2021/04/22 无线电
浅谈node.js中间件有哪些类型
2021/04/29 Javascript