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 extend()详解及简单实例
May 06 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
Apache设置虚拟WEB
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php的curl封装类用法实例
2014/11/07 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
eval的两组性能测试数据
2012/08/17 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
innerText 使用示例
2014/01/23 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
python通过post提交数据的方法
2015/05/06 Python
python中zip()方法应用实例分析
2016/04/16 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
python算的上脚本语言吗
2020/06/22 Python
如何在python中实现线性回归
2020/08/10 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Java基础知识面试要点
2016/07/29 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
安全月活动总结
2014/05/05 职场文书
个人委托书范本
2014/09/13 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python