jquery 通过ajax请求获取后台数据显示在表格上的方法

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请求获取后台数据显示在表格上的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • jQuery的Ajax接收java返回数据方法

    1.前端Ajax请求如下: $.ajax({ type : "post", //async:false, url : PATH + "/product/selectPicture.action", dataType : "json", success : function(data) { $.each(data,function(k,v){ alert(k +":"+ v); }); } }); 2 其中PATH在jsp页面中

  • JQuery实现ajax请求的示例和注意事项

    最近很多人问我ajax该怎么用,怎么访问后台,怎么取得数据页面显示 写一个简单的ajax访问: $.ajax({ url: ctx +"/meeting/getMeetingRoomMap", //请求后台地址 type:"get", //请求方式 cache:false, //控制是否缓存数据(post请求默认false,而get请求会为true,容易造成页面数据缓存问题) async:false, //控制同步还是异步 data:{scheduleDate:sc

  • PHP ajax+jQuery 实现批量删除功能实例代码小结

    目录结构 piliangshan.php <?php require_once './db_conn.php'; $sql = "select * from user"; $result = mysqli_query($conn, $sql); ?> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>全选演示</tit

  • jQuery Ajax实现Select多级关联动态绑定数据的实例代码

    jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧).这里主要是添加了它的特有属性并调用 class="chzn-select": jsp页面: <select class="chzn-select" id="CODE" name="CODE"> ...... </select> js页面: $(

  • 为jquery的ajax请求添加超时timeout时间的操作方法

    下面给大家介绍为jquery的ajax请求添加超时timeout时间的实例 有时侯要用ajax来轮询某个服务是否可用,但是各个浏览器ajax的超时时间有可能不一样,所以希望ajax能只尝试几秒钟,然后隔几秒再次发送一次ajax检查一次.可以用timeout属性. var checkLoading = function(timer) { //先延时再获取状态,否则立即获取可能重启前的服务还没有关闭 setTimeout(function() { $.ajax({ url: '/onceos/ver

  • JQuery Ajax执行跨域请求数据的解决方案

    今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下 原来的ajax请求如下: $.ajax({ type:"post", url:platformUrl +"/security/modifyPwd.do", data:$('#updatepwdform').serialize(), dataType:"json", success:function(data){ $("#upda

  • AJAX在JQuery中的应用详解

    AJAX在jQuery中的应用 1. $.ajax()方法 $.ajax()方法是一个功能十分强悍的一个底层方法,基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法. 1.1 $.ajax()中的参数及使用方法 $.ajax()调用的语法格式为: $.ajax([options]) 其中,可选参数[options]作为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器响应回调的数据,常用的参数具体格式如下: 1.2 $.

  • Jquery的Ajax技术使用方法

    Jquery的Ajax技术(重点) jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中经常使用的有三种: 1)$.get(url, [data], [callback], [type]) 2)$.post(url, [data], [callback], [type]) 区别:get有字节码乱码问题,post无字节码乱码问题(获取请求页面数据到后台,后台response.se

  • 使用jquery Ajax实现上传附件功能

    用过jquery的Ajax的人肯定都知道,Ajax的默认编码方式是"application/x-www-form-urlencoded",此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输数据的方式能够满足大部分应用场景,然而当传输的数据里有附件的时候,此序列化机制便是我们的绊脚石.Ajax本身的序列化机制的硬伤归其原因在于在html4的时代,没有FileReader接口,在页面里无法读取File(Blob)文件

  • jQuery AJAX 方法success()后台传来的4种数据详解

    1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper").html(data);显示页面*/ $.ajax({ async : false, cache : false, type : 'POST', url : 'area/prepareCreate', error : function() { alert('smx失败 '); }, success : function(data) { $("#content-wrapper").

随机推荐