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

  • 首先创建一个AJAX对象
  • 实现数据绑定
  • 实现隔行变色
  • 编写表格排序的方法（实现按照年龄这一列进行排序）
  • 通过文档碎片，把排序后的最新顺序，重新添加到tBody中（通过文档碎片，有效的避免了回流耗性能的问题，浏览器不用每当HTML结果发生改变，就重新对当前的页面进行渲染）
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .bg {
  8.              background: yellowgreen;
  9.          }
  10.      </style>
  11.  </head>
  12.  <body>
  13.  <table style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1
  14.         id="tab">
  15.      <thead>
  16.      <tr>
  17.          <td>姓名</td>
  18.          <td>年龄</td>
  19.          <td>性别</td>
  20.      </tr>
  21.      </thead>
  22.      <tbody>
  23.  
  24.      </tbody>
  25.  </table>
  26.  
  27.  <script type="text/javascript">
  28.      var oTab = document.getElementById('tab');
  29.      var tHead = oTab.tHead;
  30.      var oThs = tHead.rows[0].cells;
  31.      console.log(oThs);
  32.      var tBody = oTab.tBodies[0];
  33.      var oRows = tBody.rows;
  34.  
  35.      //将json字符串转为json对象
  36.      function jsonParse(str) {
  37.          return JSON in window ? JSON.parse(str) : eval('(' + str + ')');
  38.      }
  39.      //实现数据绑定
  40.      function bind() {
  41.          var frg = document.createDocumentFragment();
  42.          for (var i = 0; i < data.length; i++) {
  43.              var cur = data[i];
  44.              var oTr = document.createElement('tr');
  45.              for (var key in cur) {
  46.  
  47.                  var oTd = document.createElement('td');
  48.                  if (key === 'sex') {
  49.                      oTd.innerHTML = cur[key] === 0 ? '男' : '女';
  50.                  } else {
  51.                      oTd.innerHTML = cur[key];
  52.                  }
  53.                  oTr.appendChild(oTd);
  54.              }
  55.              frg.appendChild(oTr);
  56.          }
  57.          console.log(frg);
  58.          tBody.appendChild(frg);
  59.          frg = null;
  60.      }
  61.      //创建一个ajax对象
  62.      var data = null;
  63.      var xhr = new XMLHttpRequest;
  64.      xhr.open('get', 'data.txt', true);
  65.      xhr.send();
  66.      xhr.onreadystatechange = function () {
  67.  
  68.          if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
  69.              var val = xhr.responseText;
  70.              data = jsonParse(val);
  71.              bind();
  72.              changeBg();
  73.  //            sort()
  74.  
  75.          }
  76.      }
  77.      //实现隔行变色
  78.      function changeBg() {
  79.          for (var i = 0; i < oRows.length; i++) {
  80.              oRows[i].className = i % 2 === 1 ? 'bg' : null;
  81.          }
  82.      }
  83.      //编写表格排序方法：实现按照年龄这一列进行排序
  84.      function sort() {
  85.          //把存储所有的行的类数组转换为数组
  86.          console.log(oRows);
  87.          var ary = listToArray(oRows);
  88.          var _this = this;
  89.  
  90.          //给数组进行排序，按照每一行的第二列中的内容有小到大排序
  91.          console.log(ary);
  92.          _this.flag *= -1;
  93.          ary.sort(function (a, b) {
  94.              //this->window;
  95.              return parseFloat(a.cells[1].innerHTML) - parseFloat(b.cells[1].innerHTML) * _this.flag;
  96.          })
  97.          console.log(ary);
  98.  
  99.          //按照ary中的最新顺序，把每一行重新的添加到tbody中
  100.  
  101.          var frg = document.createDocumentFragment();
  102.          for (var i = 0; i < ary.length; i++) {
  103.              frg.appendChild(ary[i]);
  104.          }
  105.          tBody.appendChild(frg);
  106.          frg = null;
  107.      }
  108.      //当点击第二列，实现一次升序，再点击降序
  109.      oThs[1].flag = -1;        //给当前这一列增加一个自定义属性flag
  110.      oThs[1].onclick = function () {
  111.      //    sort();
  112.          sort.call(this);    //this->oThs[1]
  113.      }
  114.      //类数组转成数组
  115.      function listToArray(likeAry) {
  116.          var ary = [];
  117.          try {
  118.              ary = Array.prototype.slice.call(likeAry);
  119.          } catch (e) {
  120.              for (var i = 0; i < likeAry.length; i++) {
  121.                  ary[ary.length] = likeAry[i];
  122.              }
  123.          }
  124.          return ary;
  125.      }
  126.  
  127.  </script>
  128.  </body>
  129.  </html>

data.txt:

  1.  [
  2.  {
  3.  'name':'*莉',
  4.  'age':24,
  5.  'sex':1
  6.  },{
  7.  'name':'*建东',
  8.  'age':25,
  9.  'sex':0
  10.  },{
  11.  'name':'小莉',
  12.  'age':17,
  13.  'sex':1
  14.  },{
  15.  'name':'东子',
  16.  'age':16,
  17.  'sex':0
  18.  }
  19.  ]

效果图：

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. Ansible学习 Patterns

    Ansible中ad-hoc命令格式如下:ansible <pattern_goes_here> -m <module_name> -a <arguments>,P ...

  2. JavaScript数组常用的方法

    改变原数组: ※ push,pop,shif,unshift,sort,reverse ※ splice 不改变原数组: ※ concat,join→split,toString,slice push ...

  3. python爬虫：利用正则表达式爬取豆瓣读书首页的book

    1.问题描述: 爬取豆瓣读书首页的图书的名称.链接.作者.出版日期,并将爬取的数据存储到Excel表格Douban_I.xlsx中 2.思路分析: 发送请求--获取数据--解析数据--存储数据 1.目 ...

  4. 学习Pytbon第九天，函数1 过程和参数

    函数def func1():定义函数 '''testing1'''#函数的说明 print("in the func1")#定义过程 return 0 #得到函数的执行结果.还是程 ...

  5. 浅谈UWB（超宽带）室内定位技术（转载）

    技术背景 随着无线通信技术的发展和数据处理能力的提高,基于位置的服务成为最有前途的互联网业务之一.无论移动在室内还是室外环境下,快速准确地获得移动终端的位置信息和提供位置服务的需求变得日益迫切.通信和 ...

  6. POJ:2367-Cleaning Shifts

    传送门:http://poj.org/problem?id=2376 Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Sub ...

  7. [BZOJ1009][HNOI2008]GT考试(KMP+DP)

    [不稳定的传送门 Solution dp[i][j]表示前i个字符当前匹配到不吉利串的第j个,即当前方案的后缀等于不吉利串前缀 然而由于n过大,不能直接转移,用矩阵优化 Code #include & ...

  8. git rebase -i

    git rebase -i 作用: 合并提交 示例: 如图所示: 原因: 出现了两个第十一章的提交信息, 其实提交内容是一样的, 但是提交概述不一样. 这就让我很不爽. 我想把两次的概述信息合并为一个 ...

  9. python-3高级特征

    1-切片 L = ["qinzb",'fengyong','bingyan'] L[0:3] #截取从索引0开始到索引3结束(不包含索引3) L[:3] #如果索引是从0开始则可省 ...

  10. Python 探测图片文件类型

    Table of Contents 1. 探测图片类型 1.1. python magic 1.2. imghdr 1.3. PIL.Image 探测图片类型 今天遇到一个小问题,如何探测图片的文件类 ...