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">
<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": [
{<span style="color:rgb(152,118,170);">"name"</span><span style="color:rgb(204,120,50);">: </span><span style="color:rgb(106,135,89);">"天王盖地虎"</span><span style="color:rgb(204,120,50);">,
"startTime": "2017-03-02 00:00",
"is_true":"0",
"device": "SM-C9000:samsung"
},
{<span style="color:rgb(152,118,170);">"name"</span><span style="color:rgb(204,120,50);">: </span><span style="color:rgb(106,135,89);">"宝塔镇河妖"</span><span style="color:rgb(204,120,50);">,
"startTime": "2017-03-02 00:00" ,
"is_true":"0",
"device": "SM705:smartisan"
},
{<span style="color:rgb(152,118,170);">"name"</span><span style="color:rgb(204,120,50);">: </span><span style="color:rgb(106,135,89);">"锄禾日当午"</span><span style="color:rgb(204,120,50);">,
"startTime": "2017-03-02 00:00" ,
"is_true":"0" ,
"device": "EVA-AL00:HUAWEI"
}
]
}
效果图
jquery如何通过ajax请求获取后台数据显示在表格上的更多相关文章
- Jquery progressbar通过Ajax请求获取后台进度演示
项目源代码下载:http://download.csdn.net/detail/nuptboyzhb/6262253 1.简介 本文主要演示Jquery progressbar的进度条功能.js通过a ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- ajax请求获取的数据无法赋值给全局变量问题总结
一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- 解决ajax请求(SpringMVC后台)响应415/400/405错误
解决ajax请求(SpringMVC后台)响应415/400/405错误 后端代码 bean public class user { private String username; private ...
- JQuery AJAX请求aspx后台方法
利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点: 1.首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.S ...
- jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
- jQuery选择器,Ajax请求
jQuery选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $( ...
- jquery中的ajax请求到php(学生笔记)
首先ajax的基本语法基础.(必须得引入一个jquery文件,下面的例子展示用了网上的jquery文件,要联网.) 2.请求成功(复制代码运行观察效果) <!DOCTYPE html> & ...
随机推荐
- 16-6 WEB存储-通讯录实战
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用Dotfuscator保护.NET DLL加密DLL,防止DLL反编译
1.下载地址 https://pan.baidu.com/s/1ztWlBxw1Qf462AE7hQJQRg 2.操作步骤 2.1安装后打开DotfuscatorPro软件,如下图所示: 2.2 选择 ...
- dubbo系列--集群容错
作为一个程序员,咱们在开发的时候不仅仅是完成某个功能,更要考虑其异常情况程序如何设计,比如说:dubbo的消费端调用服务方异常的情况,要不要处理?如何处理? dubbo提供了多种集群容错机制,默认是f ...
- testlink 从1.8.5 升级到 1.9.8
step1:备份原 1.8.5 的数据库. step2:分别下载 1.9.0 / 1.9.3 / 1.9.8 的安装包. step3:分别解压 1.9.0 / 1.9.3 / 1.9.8 成3 ...
- Node.js——获取文件上传进度
https://juejin.im/post/5a77a46cf265da4e78327552?utm_medium=fe&utm_source=weixinqun
- COGS.1200 ganggang的烦恼
背景 Zhang Gangrui 年纪大了,记性不好,保险箱的密码记不住了,他只记得密码是一个数的阶乘各个位的数相加的和,最后还有个T或F,代表这个数是否为素数,正好,你到他家去了,他请你帮他这个忙, ...
- 关于ubuntu16.04系统无法系统更新的解决
1.提示系统更新升级,报错 /boot空间不足 2.根据网络,为获得/boot 空间,选择删除多余的内核文件 2.1 查询系统当前内核 ~$dpkg --get-selections |grep li ...
- dd - 转换和拷贝文件
摘要 dd [--help] [--version] [if=file] [of=file] [ibs=bytes] [obs=bytes] [bs=bytes] [cbs=bytes] [skip= ...
- rtim() 函数说明
rtim() 函数 string rtrim ( string $str [, string $character_mask ] ) 该函数删除 str 末端的空白字符(或者其他字符)并返回. 不使用 ...
- WNDCLASS和WNDCLASSEX
typedef struct { UINT cbSize; UINT style; WNDPROC lpfnWndProc; int cbClsExtra; int cbWndExtra; HINST ...