如何进行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. ethereum(以太坊)(七)--枚举/映射/构造函数/修改器

    pragma solidity ^0.4.10; //枚举类型 contract enumTest{ enum ActionChoices{Left,Right,Straight,Still} // ...

  2. C# Newtonsoft.Json 解析多嵌套json 进行反序列化

    [ { ", "time": "2016-09-09 12:23:33", ", "freeShipping": tru ...

  3. tcl之控制流-foreach

  4. windows系统下用VScode配置远程编辑服务器文件的环境！通过Rmate方法

    虽然公司电脑win可以通过Xshell通过SSH远程连接家中内网linux服务器了,但是只能用vim编辑文件有点不爽. 于是上网查询,windows下使用vscode远程编辑服务器文件的办法.参照博文 ...

  5. python语法练习题之九九乘法表

    九九乘法表 for...in方法实现 # 方法一 for i in range(1, 10): for j in range(1, i+1): print('{}*{}={:<4}'.forma ...

  6. stark组件（7）：增加分页功能

    效果图: 分页部分代码: # 1.分页处理 all_count = self.model_class.objects.all().count() query_params = request.GET. ...

  7. requests--etree--xpath

    # -*- coding: cp936 -*- import requests from lxml import etree url = 'https://weibo.cn/pub/' html = ...

  8. 笔记-scrapy与twisted

    笔记-scrapy与twisted Scrapy使用了Twisted作为框架,Twisted有些特殊的地方是它是事件驱动的,并且比较适合异步的代码. 在任何情况下,都不要写阻塞的代码.阻塞的代码包括: ...

  9. JAVA-数组或集合

    哈哈,今天我们来讲解一下有关于一些数组 或者是集合的知识点 1.ArrayList,LinkedList,Vector的区别 ArrayList,LinkedList,Vector都是实现List接口 ...

  10. Android 数据库中的数据给到ListView

    前言:因为之前学的都是用一个自己定义的类,完成将某一个bean中的数据直接获取,而实际中通常是通过数据库来得到的,总之,最终就是要得到数据.提一下最重要的东西,我把它叫做代理,如同一个校园代理,没有他 ...