实例详解angularjs和ajax的结合使用

这个div元素，只要赋予它`easyui-dialog`的类，并通过data-options设定一些参数，就能自动变成一个功能完善的弹出层。其中的参数如`closed:true`表示弹出层默认是关闭的，`title:'新学生注册'`设定了弹出层的标题为“新学生注册”，`modal:true`则表示这是一个模态弹出层。

例如，学生姓名这一栏，可以使用带有`easyui-textbox`样式的input元素，并添加data-options来进行验证。班级这一栏，可以使用带有`easyui-bobox`样式的input元素，同样通过data-options来进行选择和验证。

我们还可以通过一个链接来打开弹出层，例如：`加新的`。这样，用户只需点击这个链接，就可以打开弹出层。

保存按钮触发的JavaScript功能

当你点击保存按钮时，一段名为`saveClick`的JavaScript函数将被激活。这个函数主要任务是处理信息的保存工作。

它验证一个叫做`addBox`的表单，这个表单是你需要提交信息的div框的id。如果表单验证失败，也就是说有些信息没有正确填写，那么就会弹出一个提示框，告诉你哪些项没有填写完整，然后停止进一步的操作。

接下来，函数创建一个名为`stu`的对象，用于存储用户的信息。这个对象包括名字、年龄、毕业id和毕业名称。这些信息是从相应的输入字段中获取的。特别注意的是，如果用户输入的毕业id不是数字，那么它将被设置为null。

然后，这个函数通过调用`WebApplication.NewFolder.HelloAjaxNet.addStu(stu)`来添加学生信息。如果返回的结果表明操作成功（"ok"），那么它会关闭添加框，并重新加载数据网格。它会获取毕业信息并重新加载毕业选择框。

如果添加学生信息的操作失败，那么它会弹出一个提示框，显示错误信息。

关于EasyUI的验证

```javascript

$(function() {

// 页面初始化

bindDataToTable();

// 载入班级下拉框数据

var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value;

$('grad').bobox({ data: gradData }).bobox('reload');

var fd = new FormData();

// 其他前端逻辑代码...

});

```

接下来，让我们深入了解一下服务端保存的代码逻辑。这是一个典型的Web API调用，使用AjaxPro框架进行Ajax通信。假设我们正在处理学生信息的添加操作：

```csharp

// 添加学生信息的方法，使用AjaxPro进行Ajax调用

[AjaxPro.AjaxMethod]

public string addStu(StudentsInfo stu)

{

MyDb db = new MyDb(); // 数据库连接或操作对象

if (stu.GradId == null) // 如果未提供毕业ID（假设为ID标识）则进一步处理毕业名称相关逻辑

{

if (!string.IsNullOrEmpty(stu.gradName)) // 判断毕业名称是否已提供且不为空字符串则处理相关逻辑

{

Grad grd = new Grad(); // 创建新的毕业信息对象实例准备添加到数据库

grd.gradName = stu.gradName; // 设置毕业名称属性或数据项等赋值操作

Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName); // 检查数据库中是否已经存在该毕业名称的记录

在这块神秘的代码领域里，我看到了数据操作和业务逻辑如影随形，相互依存。业务逻辑仿佛一位优雅的指挥家，精准地掌握着每一个操作的节奏和步骤。它驾驭着数据，将数据转化为有意义的信息，推动应用程序的顺畅运行。在这个过程中，数据就像乐符一样跳跃着，流动着，共同编织出美妙的旋律。

controller函数就像一座桥梁，连接着应用程序与数据的交流。它承载着业务逻辑的重任，将复杂的操作过程化为一道道指令，让应用程序能够准确无误地执行。在这个函数中，我看到了数据的舞动和业务逻辑的指挥。它们协同工作，将静态的数据转化为动态的、有生命力的信息流。这种奇妙的转化过程让我不禁为之惊叹。

每一行代码都是一场奇妙的旅程，它们承载着开发者的思想和智慧。在这个controller函数中，我看到了开发者对数据操作的精湛技艺和对业务逻辑的深刻理解。这种理解不仅仅是对代码的理解，更是对业务需求的敏锐洞察和对技术挑战的勇敢应对。在这个小小的函数世界里，我看到了无限的可能性和无限的创新空间。

代码部分：

```javascript

function myCtr($scope) {

var mod = [{ name: 'xiang', age: '' }, { name: 'xiang', age: '' }, { name: 'xiang', age: ''}]; // 初始化数据模型

$scope.data = mod; // 将数据模型绑定到作用域

$scope.curobj = {}; // 当前对象，用于存储选中项

$scope.pageEntity = { total: 0, rows: 10, page: 1, pgmsg: '' }; // 分页实体，包含总记录数、每页显示条数等

// 初始化页面，获取第一页数据

$scopeitPage = function () {

var keyword = $("txtkeyword").val(); // 获取搜索关键词

var pageData = WebApplication.NewFolder.HelloAjaxNetAngular.BindData(keyword, $scope.pageEntity.page, $scope.pageEntity.rows);

$scope.data = pageData.value.rows; // 更新数据

$scope.pageEntity = updatePageInfo(pageData.value); // 更新分页信息

$scope.curobj = {}; // 重置当前选中对象

};

// 更新分页信息

function updatePageInfo(data) {

var totalpage = Math.ceil(data.total / $scope.pageEntity.rows); // 计算总页数

return {

total: data.total,

rows: $scope.pageEntity.rows,

page: $scope.pageEntity.page,

pgmsg: "共 " + data.total + " 条记录，每页 " + $scope.pageEntity.rows + " 条，共 " + totalpage + " 页，当前第 " + ($scope.pageEntity.page) + " 页"

};

}

// 更新当前选中项

$scope.modifyCur = function () {

var result = WebApplication.NewFolder.HelloAjaxNetAngular.updateStu($scope.curobj); // 更新操作

alert(result); // 提示更新结果

$scopeitPage(); // 重新初始化页面，刷新数据

};

// 下翻页

$scope.nextPage = function () {

if ($scope.pageEntity.page < totalpage) { // 如果当前页数小于总页数

$scope.pageEntity.page++; //

$scopeitPage(); // 重新初始化页面，刷新数据

}

};

// 上翻页

$scope.previousPage = function () {

if ($scope.pageEntity.page > 1) { // 如果当前页数大于第一页

$scope.pageEntity.page--; // 上一页

$scopeitPage(); // 重新初始化页面，刷新数据

}

};

// 搜索功能待实现（根据实际需求编写）

$scope.search = function () { / 实现搜索功能 / };

// 选中一行，高亮显示

$scope.del = function (event, item) { / 实现选中行的高亮显示逻辑 / };

// 调用初始化函数获取第一页数据

$scopeitPage();

}

```

所有示例项目的源码已可供下载，下载后可直接运行。由于引入了部分外部库，文件大小逼近十兆。

关于互联网的发展，我深感前端将会一统江湖，前端将成为主流。一个网页就是一个系统，一个客户端。后端只需负责数据与安全。看到博客园里的一些，我对前后端合一的mvc模式有所感悟。前端更新属性时，有一种机制能自动同步至后端并持久化到数据库；后端更新model的某个属性时，前端html页面的值也会自动变化。虽然这种技术可能还未完全稳定，但牛人们已经在不断与实现。

各种UI框架如easyui、ligerui、fineui、miniui以及Devexpress等层出不穷，js框架如seajs、requirejs、JavaScriptMVC、backbone、avalonjs、knockout等也是五花八门，让人应接不暇。虽然软件行业基于框架和平台的技术繁多，不精通某样技术也没关系，能使用即可。但作为技术人员，至少得精通一门技术。否则，可能只是在搬砖。遗憾的是，我仍处在搬砖的路上，写业务代码的也在寻求研究事情的本质。

优秀的程序员在开发数据库系统时，都会追求快速开发，积累自己的工具库和经验，制造一些工具让web开发更轻松。在工作上，不应有偏见。只要每天能完成业务代码，软件开发只是一门职业，目的在解决问题，而非纠结细节。

虽然我对js并不太感冒，它也存在许多缺陷，但在web开发中又不得不使用。这并不是对前端开发者有偏见，反而要感谢那些将前端技术吃得透的人，如司徒正美等高手，他们制造的这些工具让我们更容易完成网站程序。