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用noConflict代替$的实现方法
Apr 12 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jquery实现拖拽小方块效果
Dec 10 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
解析php5配置使用pdo
2013/07/03 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
php自定义分页类完整实例
2015/12/25 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jquery获取img的src值的简单实例
2016/05/17 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
详解pandas映射与数据转换
2021/01/22 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
大学生求职自我评价
2014/01/16 职场文书
网络编辑求职信
2014/04/30 职场文书
工作收入证明模板
2014/10/10 职场文书
客户答谢会致辞
2015/01/20 职场文书
小学数学教学随笔
2015/08/14 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技