在 CodeIgniter 中使用 jQuery

  CodeIgniter 是使用 PHP 编写的一款流行的轻量级开源框架,基于 Model-View-Controller (MVC) 架构模式。jQuery 是快速、轻量级、开源 JavaScript 库,专门用于简化 HTML 页面操作和 Ajax 集成。当将两者结合使用时,它们就为快速开发可用 Web 站点和应用程序提供了强有力的基础。

  本文展示了如何将这两个系统集成到一个单一框架中,以及如何使用 jQuery 改善现有 Web 应用程序的 UI。本文假设您已经安装了 CodeIgniter 版本 1.7.2 或更高版本以及 MySQL 版本 4.1 或更高版本,并且对这两者有较好的理解。此外,您需要 jQuery 库版本 1.4.2 或更高版本。如果首次接触 CodeIgniter 或是需要复习一下,那么请参见参考资料中的链接以获得更多信息。

  Web 2.0 的一个重要方面就是用户体验更加类似于桌面应用程序的用户体验。具体来讲,与 Web 页面的交互不要求与 Web 服务器进行 “视觉沟通” 例如,单击 Submit,等待 Web 服务器处理提交的信息,然后使用更新后的内容刷新整个 Web 页面。相反,只有更新后的内容会被刷新,而页面的其余部分保持不变。

  这种 “submission-less” 过程通过使用 Ajax 实现,Ajax 使 Web 开发人员在不需要刷新页面的情况下在 Web 客户机(浏览器)和 Web 服务器之间传输信息。更妙的是,这种信息传输的触发不需要用户直接干预。

  当一个 Web 页面使用 Ajax 时,它将异步向 Web 服务器发送或从其中接收数据。所传输的数据采用普通文本形式,因此,可以具有许多不同的格式,比如 XML、HTML、JSON,或仅仅是文本。

  实际的数据传输通过 JavaScript 和称为XMLHttpRequest的 API 完成,而这个过程正是 jQuery 发挥作用的地方。jQuery 库极大地简化了使用 Ajax 的过程。并且,不仅简化了 Ajax 的使用,而且还简化了更新数据的显示。(如果您曾经尝试过用 JavaScript 传输 HTML DOM,您就能够真正体会到这个过程变得有多么容易!)

  为了演示对 CodeIgniter 使用 jQuery 的威力和简单性,本文将带领您改善一个现有 Web 应用程序的 UI。该应用程序旨在帮助教师管理课堂活动以及每位家长的参与。教师首先从一个经董事会批准的选项列表中选择课堂活动,然后为每个活动安排一个日期。然后,学生家长登录站点并输入他们的孩子的联系信息。他们可以查看课堂活动列表并选择其参与程度(比如采购、帮助筹备、协助或充当一名活动负责人)。

  对于本文,应用程序的数据库加载了大约 100 项活动、5 名家长和一名老师。家长的用户名为parent1,parent2,……,parent5。教师的用户名为teacher,并且所有的密码均为ibm。您将需要下载Web 应用程序和数据库并在一个 Web 服务器上安装它们,以继续本文内容。应用程序要求 CodeIgniter 框架作为服务器的根。

  要开始使用 jQuery,首先下载 library(参见参考资料获得链接)。为每个版本提供了两个文件:一个未压缩的文件和一个 “缩小的” 文件(这种经过高度压缩的版本可快速加载,但是难以跟踪)。我建议对开发使用未压缩版本,在生产中使用缩小版。

  接下来,将 jQuery 库文件放到 Web 服务器的根目录下的 .assets/js 文件夹。然后,在同一个文件夹中创建名为global.js的新文件,如清单 1 所示。这将是您放置完整应用程序的 JavaScript 代码的位置。

  现在,导航到 Web 站点的索引页面。当页面加载时,一个 JavaScript警告将显示 “Hello World”。

  准备好 jQuery 库和 global.js 文件后,您就可以开始改善您的应用程序的界面了。如果还没有的话,那么花几分钟的时间作为家长和教师登录,熟悉一下这些活动如何在系统中工作。

  您将改进的第一个 UI 部分是 Registration 页面。目前,检验用户名是否已被使用是在用户提交页面后完成的。然而,通过使用 Ajax,您可以运行服务器端验证并返回结果,无需任何页面提交。

  为此,将代码绑定到用户名字段的onblur()事件,该事件将在用户光标离开字段时触发。清单 3 展示了更新后的 global.js 文件。

  在 jQuery 中,美元符号($)实际上是用于创建新 jQuery 对象的别名。因此,JavaScript 变量this不同于 jQuery 对象$(this),后者从 JavaScript 变量中创建。对于熟悉在变量前面加$的 PHP 开发人员来说,$尤其令人感到困惑。如果代码出现问题,那么务必要检查一下$的使用。

  该代码使用 ID 为username的 DOM 元素创建了一个 jQuery 对象。随后调用 jQueryblur()方法,后者将一个函数绑定到用户名字段的onblur()事件。此函数使用 Ajax 将用户名字段中的一个值提交到名为ajax的 CodeIgniter 控制器及其方法username_taken中。接着,将根据 Ajax post 的结果清除现有的错误消息,显示或不显示错误消息。

  接下来,在 ./system/application/controllers 中,创建一个名为ajax.php,的文件,该文件由 jQuery Ajax.post()方法引用。清单 4 展示了该控制器的源代码。(注意,将控制器命名为ajax没有什么特别的地方。可以将其命名为任何名称,只要.post()方法中的 URL 指向正确的控制器)。

  注意,username_taken()方法并没有返回值。相反,它回传了其响应,而这一点非常重要。jQuery Ajax 请求将数据发布到 Web 页面并使用结果页面的数据;并没有通过编程方式触及该方法本身。

  现在,您的第一个 Ajax 函数已经完成。导航到 Registration 页面并用任何已经被使用的用户名进行注册,查看相应的错误消息。

  有趣的是,jQuery 代码在编写时出现了一个意外的结果。Ajax 函数被绑定到字段且 ID 为username,这将把用户名字段包含到 Login 页面。清单 5 展示了如何修改 jQuery 对象以使其只绑定到registration_form表单中的用户名字段。

  下一项 UI 改进发生在 Class Activity 清单页面。家长要表示他或她将参见某项活动,只需单击相应的单选按钮,然后单击save链接以提交页面。对 UI 的改进就是避免单击save链接,因而也避免了页面提交。

  首先,将以下代码添加到 global.js 文件。这些代码被放在清单 6、清单 7 和清单 8 中,以使描述更简单。

  尽管 jQuery 隐藏了许多 DOM 导航的复杂性,但它并不是万能的。特别是,您将需要了解文档元素之间的层次结构关系,从而更有效地使用 jQuery 。

  该函数被绑定到任何名为 participation_type_id 的单选按钮的onclick()事件。它获得被单击的单选按钮的值。然后,使用一组链接的方法返回隐藏的表单元素。map()方法通过其函数传递每个元素,检索class_activity_id和user_id值。

  对用于设置家长参与的值进行标识后,代码将执行一个 Ajax 请求以保存此信息,如清单 7 所示。服务器对该请求的响应不会回传任何数据,因此 jQuery 响应函数为空(并且实际上可以被移除)。

  最后,使用 jQuerynext()方法将单选按钮旁边的文本修改为相应的颜色,以针对不同的字符串。代码如清单 8 所示。

  最有效且使用范围最广的一项 Ajax 应用就是自动提示或自动完成功能。以教师身份登录,并单击Manage Class Activities。要添加一项活动,用户必须向下滚动长活动列表。要改善 UI,在 ./system/application/views/activity_master_listing.php 文件的顶部向autosuggest函数添加一个输入字段绑定,如清单 11 所示。这样做将允许教师更轻松地从所有未安排的活动中进行选择。

  您现在已经完成了一半工作。您可以将字符输入到字段,检索一组匹配的活动。现在,实现用于选择、显示和保存课堂活动的代码。首先向 global.js 文件添加两个函数,用于设置活动名字段并显示一行活动信息。清单 16 展示了这两个函数的源代码。

  代码还使用 Ajax 获得显示所选活动的表行。使用清单 17 的代码生成它的 HTML。

  这段代码在活动控制器中使用,并且只进行了少量修改,包括回传最终表(而不是返回表)。需要使用来自 ./system/application/models/mactivity.php 的如清单 18 所示的 SQL 查询。

  最后,尽管您可能已经添加了一项新的活动,但您还需要删除未安排的活动并按照升序重新对列表排序。MActivity 模型的更新后的 SQL 代码如清单 19 所示。

  注意,不需要下载该库,script标记引用了 ,这是可供许多库(jQuery UI)使用的免费存储库。CSS 文件和映像已被配置为仅包含必要的样式()。最后,jQuery UI 库在构建时假设正文字体的大小为 62.5%,因此可以覆盖默认设置来适当地调整大小。

  现在尝试编辑课堂活动。当将光标放到日期输入字段时,将出现一个日历,允许您为活动选择一个日期。但是,在尝试添加一项活动时不会出现日历。这是因为活动添加 HTML 是在文档已加载完成(使用 Ajax)后编写的,因此 Datepicker 不会绑定到它的日期输入字段。要解决这个问题,需要在 Ajax 函数编写完 HTML 后将 Datepicker 绑定到日期输入字段。对 global.js 文件中的display_activity_details()函数的修改如清单 24 所示。

  在MydeveloperWorks Web 开发组中与其他开发人员讨论与 Web 开发有关的话题并分享资源。

  在本文中,您已了解到如何通过 jQuery 集成 DOM 操作以及通过 Ajax 实现无缝集成,从而极大地改进了应用程序的 UI。并且在许多情况下,实现这些改进的代码通常都很简单。现在,您可能希望进一步接受挑战,使用 Ajax 以内联的方式显示课堂活动,或者是实现在阅读本文时想到的任何其他 UI 想法,从而进一步改进应用程序。

相关阅读