如何进行ajax数据读取和绑定呢？

  • 首先创建一个AJAX对象
  • 实现数据绑定
  • 实现隔行变色
  • 编写表格排序的方法（实现按照年龄这一列进行排序）
  • 通过文档碎片，把排序后的最新顺序，重新添加到tBody中（通过文档碎片，有效的避免了回流耗性能的问题，浏览器不用每当HTML结果发生改变，就重新对当前的页面进行渲染）
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .bg {

             background: yellowgreen;

         }

     </style>

 </head>

 <body>

 <table style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1

        id="tab">

     <thead>

     <tr>

         <td>姓名</td>

         <td>年龄</td>

         <td>性别</td>

     </tr>

     </thead>

     <tbody>

     </tbody>

 </table>

 <script type="text/javascript">

     var oTab = document.getElementById('tab');

     var tHead = oTab.tHead;

     var oThs = tHead.rows[0].cells;

     console.log(oThs);

     var tBody = oTab.tBodies[0];

     var oRows = tBody.rows;

     //将json字符串转为json对象

     function jsonParse(str) {

         return JSON in window ? JSON.parse(str) : eval('(' + str + ')');

     }

     //实现数据绑定

     function bind() {

         var frg = document.createDocumentFragment();

         for (var i = 0; i < data.length; i++) {

             var cur = data[i];

             var oTr = document.createElement('tr');

             for (var key in cur) {

                 var oTd = document.createElement('td');

                 if (key === 'sex') {

                     oTd.innerHTML = cur[key] === 0 ? '男' : '女';

                 } else {

                     oTd.innerHTML = cur[key];

                 }

                 oTr.appendChild(oTd);

             }

             frg.appendChild(oTr);

         }

         console.log(frg);

         tBody.appendChild(frg);

         frg = null;

     }

     //创建一个ajax对象

     var data = null;

     var xhr = new XMLHttpRequest;

     xhr.open('get', 'data.txt', true);

     xhr.send();

     xhr.onreadystatechange = function () {

         if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {

             var val = xhr.responseText;

             data = jsonParse(val);

             bind();

             changeBg();

 //            sort()

         }

     }

     //实现隔行变色

     function changeBg() {

         for (var i = 0; i < oRows.length; i++) {

             oRows[i].className = i % 2 === 1 ? 'bg' : null;

         }

     }

     //编写表格排序方法：实现按照年龄这一列进行排序

     function sort() {

         //把存储所有的行的类数组转换为数组

         console.log(oRows);

         var ary = listToArray(oRows);

         var _this = this;

         //给数组进行排序，按照每一行的第二列中的内容有小到大排序

         console.log(ary);

         _this.flag *= -1;

         ary.sort(function (a, b) {

             //this->window;

             return parseFloat(a.cells[1].innerHTML) - parseFloat(b.cells[1].innerHTML) * _this.flag;

         })

         console.log(ary);

         //按照ary中的最新顺序，把每一行重新的添加到tbody中

         var frg = document.createDocumentFragment();

         for (var i = 0; i < ary.length; i++) {

             frg.appendChild(ary[i]);

         }

         tBody.appendChild(frg);

         frg = null;

     }

     //当点击第二列，实现一次升序，再点击降序

     oThs[1].flag = -1;        //给当前这一列增加一个自定义属性flag

     oThs[1].onclick = function () {

     //    sort();

         sort.call(this);    //this->oThs[1]

     }

     //类数组转成数组

     function listToArray(likeAry) {

         var ary = [];

         try {

             ary = Array.prototype.slice.call(likeAry);

         } catch (e) {

             for (var i = 0; i < likeAry.length; i++) {

                 ary[ary.length] = likeAry[i];

             }

         }

         return ary;

     }

 </script>

 </body>

 </html>

data.txt:

 [

 {

 'name':'*莉',

 'age':24,

 'sex':1

 },{

 'name':'*建东',

 'age':25,

 'sex':0

 },{

 'name':'小莉',

 'age':17,

 'sex':1

 },{

 'name':'东子',

 'age':16,

 'sex':0

 }

 ]

效果图：

ajax数据读取和绑定的更多相关文章

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. 项目中使用的ajax异步读取数据结构设计

    设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...

  3. Javascript Ajax异步读取RSS文档

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...

  4. 教你如何使用flask实现ajax数据入库

    摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...

  5. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  6. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  7. django建立管理系统之五----单页ajax数据交互

    ajax数据提交: 需求: 1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新 a.可以用刷新页面来实现数据页面的更新 对应的html,实现局部刷新(可以用刷新页面实现,例如 $ ...

  8. kkpager的改进,Ajax数据变化但是页码不变的有关问题

    kkpager的改进,Ajax数据变化但是页码不变的问题kkpager 是一个简单分页展示插件,需要依赖jquery.下载地址:http://www.oschina.net/action/projec ...

  9. ASP.NET中关于XML的AJAX的读取与删除

    一个XML文件,名称就暂定为GroupStudents.xml吧,内容如下: <?xml version="1.0" encoding="utf-8"?& ...

随机推荐

  1. PL/sql中如何声明变量,常量,控制语句及for,loop,while和顺序控制的使用

    pl/sql 什么是PL/SQL PL/SQL是结合oracle过程语言和机构化查询运行(SQL) 的一种扩展语言.使用PL/SQL可以编写具有很多高级功能的程序,有以下优点 PL/SOL可以采用过程 ...

  2. scrapy--json(喜马拉雅Fm)(二)

    学习了对数据的储存,感觉还不够深入,昨天开始对储存数据进行提取.整合和图像化显示.实例还是喜马拉雅Fm,算是对之前数据爬取之后的补充. 明确需要解决的问题 1,蕊希电台全部作品的进行储存 --scra ...

  3. 第一次认识lambda匿名函数

    lambda 为了解决一些简单的需求而设计的"一句话"函数 语法 lambda 参数:返回值 1.可以多个参数,参数间用逗号隔开 2.匿名函数不管多复杂,只能写一行 3.返回值和正 ...

  4. python3 练习题100例 （十九）

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- """练习十九:计算1-2+3...+99中除了88以外所有数的和" ...

  5. 文档-linux io模式及select,poll,epoll

    文档-Linux IO模式详解 1. 概念说明 在进行解释之前,首先要说明几个概念:- 用户空间和内核空间- 进程切换- 进程的阻塞- 文件描述符- 缓存 I/O 1.1 用户空间与内核空间 现在操作 ...

  6. 04，Python网络爬虫之requests模块（1）

    引入 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用. 警告:非专业使用其他 HTTP 库会导致危险的副作用,包括:安全缺陷症.冗余代码症.重新发明轮子症.啃文档 ...

  7. MVC WebAPI 的基本使用

    1.什么是WebAPI Web API是网络应用程序接口.包含了广泛的功能,网络应用通过API接口,可以实现存储服务.消息服务.计算服务等能力,利用这些能力可以进行开发出强大功能的web应用. 它可以 ...

  8. Android字体大小怎么自适应不同分辨率？

    今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的. 一. 原理如下: 假设需要适应320x240,480x320分辨率.在res ...

  9. “管中窥豹”，MyCAT的基因缺陷

    提起MyCAT,我的脑海里,总是浮现出这样一首偈.弘忍觉得自己老了,需要找一个接班人,于是,弘忍要求弟子们每人写一个偈子,根据偈子观察各位弟子的开悟程度,从而传授正宗禅宗的衣钵.弟子们心里其实都很明白 ...

  10. css改变光标

    <span style="cursor:auto"> Auto</span><br /> <span style="cursor ...