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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现tab栏切换效果
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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python 多进程原理及实现
2020/12/21 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
品学兼优的大学生自我评价
2013/09/20 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js