这是一篇关于easyui配合ajax使用的文章，顺带介绍angularjs的使用以及让你感受到angularjs的威力。网上对于ajax 的文也是多如牛毛 。我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈。看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥真正做的时候写那种东西 不是扯淡么你叼你技术牛逼整站的代码你全用那种写。html js 这种东西最开始设计出来就没考虑周全就是坨屎。还好现在有各种框架 可以帮助我们更容易的把这坨屎做的更美味。也还好由于互联网事业如日中天 的推动 让浏览器端的这堆东西正在往统一规范的方向发展。

我们来建立一个webform页面 HelloAjaxNet.aspx。先说下ajax 这里我使用网上流传甚广的那个AjaxPro.2.dll 他的网站是 http:///angular.html

反正这两个教程看了下对我没 对我没起到啥作用 感觉跟嚼木渣样的 ，angularjs的理念虽然是mvvm 但是angularjs本身还是感觉晦涩难懂。

我就在这样一个半懂不懂的状态下写了这个例子 ，所有的操作 几乎都完全不需要向jquery那样动dom 。真心感觉到了他的强大。前端就一个controller函数 管整个页面，怎么一个一个的分 我也不明白 只知道controller 跟html限定一样的树状结构。没在范围的html元素不能访问其controller里的 变量。

我们来看这个controller 函数 ，我写的时候也没什么感觉 。就是感觉很存粹 就只感觉到两个东西存在 。业务逻辑在操作数据。 就像在写c#数据操作代码样：

function myCtr($scope) { var mod = [{ name: 'xiang', age: }, { name: 'xiang', age: }, { name: 'xiang', age: }]; $scope.data = mod; $scope.curobj = {}; $scope.pageEntity = { total: , rows: , page: , pgmsg: '' } //初始化默认第一页 $scope.initPage = function () { var firstPage = WebApplication.NewFolder.HelloAjaxNetAngular.BindData($("#txtkeyword").val(), $scope.pageEntity.page, $scope.pageEntity.rows); $scope.data = firstPage.value.rows; var pageEntityMod = {}; pageEntityMod.total = firstPage.value.total; pageEntityMod.rows = $scope.pageEntity.rows; pageEntityMod.page = $scope.pageEntity.page; var totalpage = pageEntityMod.total % pageEntityMod.rows == ? parseInt(pageEntityMod.total / pageEntityMod.rows) : parseInt(pageEntityMod.total / pageEntityMod.rows) + ; pageEntityMod.pgmsg = "共 " + pageEntityMod.total + "条记录 每页 " + pageEntityMod.rows + "条，共 " + totalpage + "页 ，当前第 " + pageEntityMod.page + "页"; $scope.pageEntity = pageEntityMod; $scope.curobj = {}; } //更新当前 选定的 $scope.modifyCur = function () { var rst = WebApplication.NewFolder.HelloAjaxNetAngular.updateStu($scope.curobj) //刷新表格 当前选中信息 复原 $scope.initPage(); alert(rst.value); } //下翻页 $scope.nextPage = function () { var totalpage = $scope.pageEntity.total % $scope.pageEntity.rows == ? parseInt($scope.pageEntity.total / $scope.pageEntity.rows) : parseInt($scope.pageEntity.total / $scope.pageEntity.rows) + ; var pagenewnum = $scope.pageEntity.page + ; if (pagenewnum <= totalpage) $scope.pageEntity.page += ; $scope.initPage(); } //上翻页 $scope.previousPage = function () { var pagenewnum = $scope.pageEntity.page - ; if (pagenewnum >= ) $scope.pageEntity.page -= ; $scope.initPage(); } //搜索 $scope.search = function () { } //选中一行 $scope.del = function (sender, curobj) { //所有行的颜色还原//设置选中那一行的颜色 var rows = $(sender.target).parent().parent().parent().find("tbody").find("tr"); for (var i = ; i < rows.length; i++) { $(rows[i]).css("background", "white"); } $(sender.target).parent().css("background", "#ffed"); $scope.curobj = curobj; } //首次先调用下 以获取第一页 $scope.initPage(); }

界面部分：

<div ng-controller="myCtr" id="mygrid"> <input id="txtkeyword" type="text" /><input ng-click="initPage()" type="button" value="搜索" /> <br /> <br /> <div style="height: px"> <table cellspacing="" border="" class="gridtable"> <thead> <th width="px">name</th> <th width="px">age</th> </thead> <tbody ng-repeat="stu in data"> <tr ng-click='del($event,stu)' style="background-color: white"> <td>{{stu.name}}</td> <td>{{stu.age}}</td> </tr> </tbody> </table> </div> <div id="pager"> <a href="#" ng-click="previousPage()">上一页</a> <a href="#" ng-click="nextPage()">下一页</a> <span>{{pageEntity.pgmsg}}</span> </div> <div> 姓名：<input type="text" value="{{curobj.name}}" ng-model="curobj.name" /><br /> 年龄：<input type="text" value="{{curobj.age}}" ng-model="curobj.age" /> <input id="Button" type="button" ng-click="modifyCur()" value="更改" /> </div> </div>

看到我自己搞了一个数据绑定函数 参照easyui里datagrid的loader。 第一次请求得到分页信息后 我立即把数据绑定到表格 你可以看到完全就像做模板样的，然后初始化自己的分页控件。 在ng-click 的时候像原来一样触发客户端单击 然后调用controller里的方法去更新数据 ，注意仅仅是根据业务逻辑去更新数据 其他的不需要做。关于上面两段代码不明白的自行去看angularjs 入门和数据绑定 用不了10分钟，

由于有wpf那种双向绑定机制，数据模型 数据更新了 页面内容自动跟着变。甚至你可以看到我编辑下面文本框里的数据的时候 都还没提交 上面表格的数据就跟着变 因为他们的数据是从同一个地方来的，看着恍惚都感觉是ajax哈。

上面所有示例的项目源码下载 可直接运行，由于引了些外部库进来十兆差点放不下

说点后话

其实照互联网这样推动发展下去的话 前端会统一 前端才是王道 到时候一个网页 就是一个系统 一个客户端。 后端只负责数据和安全。 现在的什么html5不是几乎都成为工业标准了么 有些嵌入式设备都支持

暂时像博客园里我看到的有几个讲的 前后端天人合一的那种mvc模式 前端后端操作同一个model 前端更新属性了有一种机制自动就更新到后端持久化到数据库去了 或者后端更新model的某个属性 前端html页面的值自动就变了。 不是说做不到 毕竟牛人这么多 ，我觉得至少还不稳定吧。

各种ui有easyui ligerui fineui miniui Devexpress 还有很多js框架 seajs requirejs JavaScriptMVC backbone avalonjs knockout angular jquery jqueryui js真是屎一样的东西啊各种框架学都学不完

尤其是软件行业日新月异 基于框架 和平台的技术太多了 不精通某样技术没关系 能使用就行 ，但是作为一个技术人员 你至少得精通一样 或者一门技术 要不然就是个搬砖的 很遗憾 我基本还在搬砖的路上。写业务代码就是用一年的经验混十年，写业务代码是他的工作 工作之余还得有点精神追究 研究下事情的本质 ，只要是还不错的程序员 做这种数据库系统久了都会自己搞点能快速开发的所谓的小框架 积累一些自己的工具库 和经验。

在工作上不要有什么偏见 只要他每天把业务代码写的出来 软件开发也只是一门职业 你不是英雄 ，目的是解决问题 不是转牛角尖。

我本人对js是不怎么感冒的 js也很烂，当初设计这个东西的时候就不完善给我们使用它造成了各种阻碍 ，但是你做web开发又不得不用它。这里也并不是对做前端的有什么偏见 感谢那些前端吃的很透的人 像司徒正美那些高手 制造了这些工具让我们更容易的去完成这些网站程序。