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查找dom的几种方法效率详解
May 17 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现本地存储
Dec 22 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中include与require使用方法区别详解
2013/10/19 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
原生js实现验证码功能
2017/03/16 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
在python里面运用多继承方法详解
2019/07/01 Python
python实现用户名密码校验
2020/03/18 Python
django教程如何自学
2020/07/31 Python
浅析python实现动态规划背包问题
2020/12/31 Python
C语言编程题
2015/03/09 面试题
中专毕业生自荐信范文
2013/11/28 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
节约能源标语
2014/06/17 职场文书
2014年公司工作总结
2014/11/22 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
小学校本教研总结
2015/08/13 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书