jquery通过创建交互式、快速动态网页应用的网页开发技术请求获取后台数据显示在表格上的方法

1、引入引导程序和框架的内容交付网络

链接rel='样式表type=' text/CSS ' href=' https://cdn。bootcss。com/bootstrap/4。0 .0-beta。2/CSS/bootstrap。量滴CSS ' rel='外部无跟随'脚本类型=' text/JavaScript ' src=' http :3359 cdn。bootcss。com/jquery/1。4 .0/jquery。js '/脚本2、html部分

table class=' table-table-bordered ' id=' table test ' tr th名字/th开始时间/th是否真实/th设备/th /tr /table3、js部分

一使用因为在

$(function(){ $).ajax({ url:'data.json '，type:'get '，dataType:'json '，success:function(data){ //方法中传入的参数数据为后台获取的数据for(i in data.data) //data.data指的是数组，数组里是8个对象，我为数组的索引{ var trtr='td' data.data[i].名称/' TD ' ' TD '数据。数据[一].startTime '/td' 'td' data.data[i].is _ true/' TD ' ' TD '数据。数据[一].设备/td' $('#tabletest ').追加(' tr' tr '/tr') } } })}) ***注意****用于在通常用于对象遍历数组的两种方法（每个，foreach): $ .每个(arr，函数（索引，项){}) arr.forEach(函数（项，索引))//arr为数组，索引索引，项目为当前值每个2方法

$(function(){ $).ajax({ url:'data.json '，type:'get '，dataType:'json '，success:function(data){ $ .每个(data.data，function(index，item){ var tr；tr=' TD '项。名称“/TD”“TD”项。开始时间'/TD ' ' TD '项。is _ true/' TD ' ' TD '项。设备'/TD '；$('#tabletest ').追加(' tr ' tr '/tr ')})})总结：获取对象属性的方法：item.name或项目['名称]

框架添加节点方法：

ul.append('li '哈哈/李')

附录：在/ul之前添加里

prepend:在保险商实验所之后添加里

:之前在保险商实验所之前添加里

:后在/ul之后添加里

-延伸-

(1)将数据中是真的吗中的0转换为中文

采用三目运算或条件判断

项目。is _ true=ParSeint(项。is _ true)=0？'否':'是'//注意数据是线类型需转换，且三目运算符返回的是结果不能写成item.is_true==0？item.is_true='否' : item.is_true='是'(2)将数据中设备过滤只显示冒号以前的数据

项目。is _ true=ParSeint(项。is _ true)=0？'否':'是var arr=项目。设备。拆分(' : ')项。设备=arr[0]拆分()分隔符方法用于把一个字符串分割成字符串数组

4.data.json文件

{ '状态' : 0,'数据' : [ { '名称' : '天王盖地虎，' startTime ' : ' 2017-03-02 00:00 '，' is_true':'0 '，' device ' : ' SM-c 90003360 Samsung ' }，{ 'name': '宝塔镇河妖，' startTime ' : ' 2017-03-02 00:00 '，' is_true':'0 '，' device ' : ' sm 7053360 martisan ' }，{ 'name': '锄禾日当午，' startTime ' : ' 2017-03-02 00:00 '，' is_true':'0 '，' device ' : ' EVA-al 003360 Huawei ' }]}效果图：

以上这篇框架通过创建交互式、快速动态网页应用的网页开发技术请求获取后台数据显示在表格上的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。