页面导航：
→ 正文内容 HTML页面加载运行js
两种方法实现在HTML页面加载完毕后运行某个js
这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下
代码如下: &script type="text/javascript"& window.onload=function(){ var userName="xiaoming"; alert(userName); } &/script&
以下为jQuery方法，需要引用jQuery文件。
代码如下: &script type="text/javascript"& $(document).ready(function(){ var userName="xiaoming"; alert(userName); }); &/script&
或者其简写
代码如下: $(function(){ var userName="xiaoming"; alert(userName); });
当dom加载完就可以执行（比window.onload更早）。在同一个页面里可以多次出现.ready() PS：两者的主要区别 window.onload： 当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。、 $(document).ready{ }： 会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执行。 举一个例子： 假设有一个表现图库的页面，这种页面中可能会包含许多大型图像，我们可以通过jQuery隐藏、显示或以其他方式操作这些图像。如果我们通过onload页面设置界面，那么用户在能够使用这个页面之前，必须要等到每一幅图像都下载完成。更糟糕的是，如果行为稍微添加给哪些具有默认行为的元素(比如链接)，那么用户的交互可能会导致意想不到的结果。然而当我们试用$(document).ready(){ }进行设置时，这个界面就会更早地准备好可用的正确行为。 使用$(document).ready(){ }一般来说都要优于试用onload事件处理程序，但必须要明确一点的是，因为支持文件可能还没有家在完成，所以类似图像的高度和宽度这样的属性此时不一定有效。 注：用把js放在页面底部的方法以及运用defer="defer" 的方法都是会出现问题的。最好使用上面的函数！
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910jQuery ajax - ajax() 方法
jQuery ajax - ajax() 方法
通过 AJAX 加载一段文本：
jQuery 代码：
$(document).ready(function(){
$(&#b01&).click(function(){
htmlobj=$.ajax({url:&/jquery/test1.txt&,async:false});
$(&#myDiv&).html(htmlobj.responseText);
HTML 代码：
&div id=&myDiv&&&h2&Let AJAX change this text&/h2&&/div&
&button id=&b01& type=&button&&Change Content&/button&
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
jQuery.ajax([settings])
可选。用于配置 Ajax 请求的键值对集合。
可以通过 $.ajaxSetup() 设置任何选项的默认值。
类型：Object
可选。AJAX 请求设置。所有选项都是可选的。
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
类型：Boolean
默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。
complete(XHR, TS)
类型：Function
请求完成后回调函数 (请求成功或失败之后均调用)。
参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
这是一个 Ajax 事件。
contentType
类型：String
默认值: &application/x-www-form-urlencoded&。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样：
$.ajax({ url: &test.html&, context: document.body, success: function(){
$(this).addClass(&done&);
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[&bar1&, &bar2&]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter
类型：Function
给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
&xml&: 返回 XML 文档，可用 jQuery 处理。
&html&: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
&script&: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 &cache& 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
&json&: 返回 JSON 数据 。
&jsonp&: JSONP 格式。使用 JSONP 形式调用函数时，如 &myurl?callback=?& jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
&text&: 返回纯文本字符串
类型：Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 &timeout&, &error&, &notmodified& 和 &parsererror&。
这是一个 Ajax 事件。
类型：Boolean
是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
类型：Boolean
仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
类型：String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 &callback=?& 这种 GET 或 POST 请求中 URL 参数里的 &callback& 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 &onJsonPLoad=?& 传给服务器。
jsonpCallback
类型：String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
类型：String
用于响应 HTTP 访问认证请求的密码
processData
类型：Boolean
默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 &application/x-www-form-urlencoded&。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset
类型：String
只有当请求时 dataType 为 &jsonp& 或 &script&，并且 type 是 &GET& 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
traditional
类型：Boolean
如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
类型：Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
类型：String
默认值: &GET&)。请求方式 (&POST& 或 &GET&)， 默认为 &GET&。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
类型：String
默认值: 当前页地址。发送请求的地址。
类型：String
用于响应 HTTP 访问认证请求的用户名。
类型：Function
需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter
在请求成功之后调用。传入返回的数据以及 &dataType& 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
$.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。
通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。
其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。
注意：我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。
如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。
JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback，可以通过设置 $.ajax() 的 jsonp 参数。
注意：JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。
如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了 &script& 标签而不是 XMLHttpRequest 对象。这种情况下，$.ajax() 不再返回一个 XMLHttpRequest 对象，并且也不会传递事件处理函数，比如 beforeSend。
发送数据到服务器
默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。
global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。
如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。
Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。
默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。
scriptCharset 允许给 &script& 标签的请求设定一个特定的字符集，用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时，这特别好用。
Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成 false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
$.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象，但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。developerWorks 社区
了解使用 jQuery 改善您的 CodeIgniter 应用程序的可用性有多么简单。通过利用 CodeIgniter 的基于 MVC 的框架和 jQuery 对 Asynchronous JavaScript and XML (Ajax) 交互的支持，了解如何快速、高效地创建更有效的 UI。
, CTO, imagistic
Kevin Howard Goldberg 在高科技产业具有 20 多年的从业经验，现居住在美国加州 Westlake Village，是一名技术总监、作者和顾问。他目前是 imagistic 公司的 CTO，这是一家获过奖的数字营销和技术公司，这家公司是他在 1997 年与别人共同成立的。作为一个 Web 开发和技术专家，他在 Santa Monica College Computer Science Advisory Board 服务并曾在 Film Roman、Lionsgate 和 Philips Interactive Media 担任过高管。他是 （PeachPit Press，2008 年）一书的作者。可以通过
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：对 Ajax 使用 jQueryWeb 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 应用程序为了演示对 CodeIgniter 使用 jQuery 的威力和简单性，本文将带领您改善一个现有 Web 应用程序的 UI。该应用程序旨在帮助教师管理课堂活动以及每位家长的参与。教师首先从一个经董事会批准的选项列表中选择课堂活动，然后为每个活动安排一个日期。然后，学生家长登录站点并输入他们的孩子的联系信息。他们可以查看课堂活动列表并选择其参与程度（比如采购、帮助筹备、协助或充当一名活动负责人）。
注意：该系统可以很轻松地应用以支持儿童运动队、YMCA 小组等等。
对于本文，应用程序的数据库加载了大约 100 项活动、5 名家长和一名老师。家长的用户名为 parent1，parent2，……，parent5。教师的用户名为 teacher，并且所有的密码均为 ibm。您将需要
Web 应用程序和数据库并在一个 Web 服务器上安装它们，以继续本文内容。应用程序要求
CodeIgniter 框架作为服务器的根。
设置 jQuery要开始使用 jQuery，首先下载 library（参见
获得链接）。为每个版本提供了两个文件：一个未压缩的文件和一个 “缩小的” 文件（这种经过高度压缩的版本可快速加载，但是难以跟踪）。我建议对开发使用未压缩版本，在生产中使用缩小版。
接下来，将 jQuery 库文件放到 Web 服务器的根目录下的 .assets/js 文件夹。然后，在同一个文件夹中创建名为 global.js 的新文件，如清单 1 所示。这将是您放置完整应用程序的 JavaScript 代码的位置。
清单 1. 使用 jQuery 的 “Hello World”/* Global JavaScript File for working with jQuery library */
// execute when the HTML file's (document object model: DOM) has loaded
$(document).ready(function() {
alert ('Hello World');
});对本文而言 — 以及大部分应用程序 — 许多 jQuery 代码将位于 $(document).ready() 函数中。该函数只有在 HTML 文件的 DOM 完成加载后才会自动触发。
如果应用程序要加载所有这些文件，那么编辑 ./system/application/views/template.php
文件，如清单 2 所示。
清单 2. 加载 jQuery 和全局 JavaScript 文件&head&
&meta http-equiv="content-type" content="text/ charset=UTF-8" /&
&link href="/assets/css/screen.css" rel="stylesheet" type="text/css" /&
the following two lines load the jQuery library and JavaScript files --&
&script src="/assets/js/jquery-1.4.2.js" type="text/javascript"&&/script&
&script src="/assets/js/global.js" type="text/javascript"&&/script&
&title&&?php echo $?&&/title&
&/head&现在，导航到 Web 站点的索引页面。当页面加载时，一个 JavaScript
警告将显示 “Hello World”。
对 CodeIgniter 使用 jQuery 和 Ajax准备好 jQuery 库和 global.js 文件后，您就可以开始改善您的应用程序的界面了。如果还没有的话，那么花几分钟的时间作为家长和教师登录，熟悉一下这些活动如何在系统中工作。
自动用户名验证您将改进的第一个 UI 部分是 Registration 页面。目前，检验用户名是否已被使用是在用户提交页面后完成的。然而，通过使用 Ajax，您可以运行服务器端验证并返回结果，无需任何页面提交。
为此，将代码绑定到用户名字段的 onblur()
事件，该事件将在用户光标离开字段时触发。清单 3 展示了更新后的 global.js 文件。
清单 3. 检查用户名是否已被注册/* Global JavaScript File for working with jQuery library */
// execute when the HTML file's (document object model: DOM) has loaded
$(document).ready(function() {
/* USERNAME VALIDATION */
// use element id=username
// bind our function to the element's onblur event
$('#username').blur(function() {
// get the value from the username field
var username = $('#username').val();
// Ajax request sent to the CodeIgniter controller "ajax" method "username_taken"
// post the username field's value
$.post('/index.php/ajax/username_taken',
{ 'username':username },
// when the Web server responds to the request
function(result) {
// clear any message that may have already been written
$('#bad_username').replaceWith('');
// if the result is TRUE write a message to the page
if (result) {
$('#username').after('&div id="bad_username" style="color:"&' +
'&p&(That Username is already taken. Please choose another.)&/p&&/div&');
});该代码使用 ID 为 username 的 DOM 元素创建了一个 jQuery 对象。随后调用 jQuery
blur() 方法，后者将一个函数绑定到用户名字段的 onblur() 事件。此函数使用 Ajax 将用户名字段中的一个值提交到名为 ajax 的 CodeIgniter 控制器及其方法
username_taken 中。接着，将根据 Ajax post 的结果清除现有的错误消息，显示或不显示错误消息。
接下来，在 ./system/application/controllers 中，创建一个名为 ajax.php, 的文件，该文件由 jQuery Ajax .post() 方法引用。清单 4 展示了该控制器的源代码。（注意，将控制器命名为 ajax 没有什么特别的地方。可以将其命名为任何名称，只要 .post() 方法中的 URL 指向正确的控制器）。
清单 4. 处理 Ajax 请求的 CodeIgniter 控制器&?php
class Ajax extends Controller {
public function Ajax() {
parent::Controller();
public function username_taken()
$this-&load-&model('MUser', '', TRUE);
$username = trim($_POST['username']);
// if the username exists return a 1 indicating true
if ($this-&MUser-&username_exists($username)) {
/* End of file ajax.php */
/* Location: ./system/application/controllers/ajax.php */注意，username_taken() 方法并没有返回 值。相反，它回传了其响应，而这一点非常重要。jQuery Ajax 请求将数据发布到 Web 页面并使用结果页面的数据；并没有通过编程方式触及该方法本身。
现在，您的第一个 Ajax 函数已经完成。导航到 Registration 页面并用任何已经被使用的用户名进行注册，查看相应的错误消息。
有趣的是，jQuery 代码在编写时出现了一个意外的结果。Ajax 函数被绑定到字段且 ID 为 username，这将把用户名字段包含到 Login 页面。清单 5 展示了如何修改 jQuery 对象以使其只绑定到 registration_form
表单中的用户名字段。
清单 5. 限定正确的用户名字段
/* USERNAME VALIDATION */
// use element id=username within the element id=registration_form
// bind our function to the element's onblur event
$('#registration_form').find('#username').blur(function() {下一项 UI 改进发生在 Class Activity 清单页面。家长要表示他或她将参见某项活动，只需单击相应的单选按钮，然后单击 save 链接以提交页面。对 UI 的改进就是避免单击 save 链接，因而也避免了页面提交。
首先，将以下代码添加到 global.js 文件。这些代码被放在清单 6、清单 7 和清单 8 中，以使描述更简单。
清单 6. 使用 jQuery 获得相关元素值
/* AUTOSAVE PARTICIPATION */
// use input element name=participation_type_id and type=radio
// bind our function to the element's onclick event
$('input[name=participation_type_id]:radio').click(function() {
var participation_type_id = this.
// create global variables for use below
var class_activity_id, user_
// get the form's two hidden input elements
// each is a sibling of the parent of the clicked radio button
// store their values in the global variables
var hidden_elements = $(this).parent().siblings('input:hidden');
$(hidden_elements).map(function() {
if (this.name == 'class_activity_id') {
class_activity_id = this.
if (this.name == 'user_id') {
user_id = this.
});该函数被绑定到任何名为 participation_type_id 的单选按钮的 onclick() 事件。它获得被单击的单选按钮的值。然后，使用一组链接的方法返回隐藏的表单元素。map() 方法通过其函数传递每个元素，检索 class_activity_id
和 user_id 值。
对用于设置家长参与的值进行标识后，代码将执行一个 Ajax 请求以保存此信息，如清单 7 所示。服务器对该请求的响应不会回传任何数据，因此 jQuery 响应函数为空（并且实际上可以被移除）。
清单 7. 向 CodeIgniter 发布一个 Ajax 请求
// Ajax request to CodeIgniter controller "ajax" method "update_user_participation"
// post the user_id, class_activity_id and participation_type_id fields' values
$.post('/index.php/ajax/update_user_participation',
{ 'user_id':user_id,
'class_activity_id':class_activity_id,
'participation_type_id':participation_type_id },
// when the Web server responds to the request
function(result) { }
);最后，使用 jQuery next() 方法将单选按钮旁边的文本修改为相应的颜色，以针对不同的字符串。代码如清单 8 所示。
清单 8. 动态修改单选按钮文本的颜色
// set the text next to the clicked radio button to red
$(this).next().css("color", "red");
// set the text next to the remaining radio buttons to black
var other_r_buttons = $(this).siblings('input[name=participation_type_id]:radio');
$(other_r_buttons).map(function() {
$(this).next().css("color", "black");
});现在已经编写好 jQuery 代码，您需要在 ajax 控制器中创建 update_user_participation() 方法，如清单 9 所示。
清单 9. 在 CodeIgniter 中处理用户参与
public function update_user_participation()
$this-&load-&model('MActivity', '', TRUE);
$this-&MActivity-&set_user_participation($_POST);
}该方法使用已在 MActivity 模型中找到的 set_user_participation() 方法，它将获取 Ajax 请求发出的变量。
最后，在 ./system/application/controller/activity.php 中注释掉保存链接，如清单 10 所示。
清单 10. 删除没有用的保存链接
'&span style="style="white-space:"&'.
$participation_type_buttons.'&&'.
/* the save link is no longer needed
'&a href="" onclick="document.forms[\'form_'.$activity-&id.'\'].submit();
"&save&/a&'. */
'&/span&'.
'&/form&';您现在可以修改家长参与，并且不需要页面刷新即可自动保存。自动提示输入字段最有效且使用范围最广的一项 Ajax 应用就是自动提示或自动完成功能。以教师身份登录，并单击 Manage Class Activities。要添加一项活动，用户必须向下滚动长活动列表。要改善 UI，在 ./system/application/views/activity_master_listing.php 文件的顶部向 autosuggest 函数添加一个输入字段绑定，如清单 11 所示。这样做将允许教师更轻松地从所有未安排的活动中进行选择。
清单 11. 添加一个自动提示输入字段&div id="select_anchor"&
&a href="" onclick="$('#select_anchor').hide(100);
$('#select_activity').show(100);
Select an unscheduled Activity to add &&&/a&
&br /&&br /&
&div id="select_activity" class="requested_activity" style="display:"&
&caption&&Select an unscheduled Activity&/caption&
&tr class="odd_row_add"&
Begin by typing a few letters of an activity name&br /&
then select from the resulting list&br /&
&input type="text" value="" id="class_activity"
onkeyup="autosuggest(this.value);" class="autosuggest_input" /&
&div class="autosuggest" id="autosuggest_list"&&/div&
&/div&注意绑定到 JavaScript
onclick() 事件的两个 jQuery 对象和方法。记住，jQuery 只是一个 JavaScript 库，因此可以在整个应用程序中与 JavaScript 无缝交互，而不仅仅是在 $(document).ready()
接下来，在 global.js 文件的 $(document).ready() 函数之外，实现以下 JavaScript 函数。它一定是 class_activity 输入字段的 onkeyup() 事件。源代码如清单 12 所示。
清单 12. 使用 jQuery 实现自动提示/* AUTOSUGGEST SEARCH */
// triggered by input field onkeyup
function autosuggest(str){
// if there's no text to search, hide the list div
if (str.length == 0) {
$('#autosuggest_list').fadeOut(500);
// first show the loading animation
$('#class_activity').addClass('loading');
// Ajax request to CodeIgniter controller "ajax" method "autosuggest"
// post the str parameter value
$.post('/index.php/ajax/autosuggest',
{ 'str':str },
function(result) {
// if there is a result, fill the list div, fade it in
// then remove the loading animation
if(result) {
$('#autosuggest_list').html(result);
$('#autosuggest_list').fadeIn(500);
$('#class_activity').removeClass('loading');
}注意，尽管此函数不在 $(document).ready() 函数内，但是它仍然使用 jQuery
对象和方法。它的 jQuery .post() 方法调用 Ajax 控制器的 autosuggest() 方法，后者回传 autosuggest 结果的无序列表。清单 13 显示了代码。
清单 13. 检索和回传自动提示结果
public function autosuggest()
// escapes single and double quotes
$str = addslashes($_POST['str']);
$this-&load-&model('MActivity', '', TRUE);
$unscheduled_activities_qry = $this-&MActivity-&find_unscheduled_activities($str);
// echo a list where each li has a set_activity function bound to its onclick() event
echo '&ul&';
foreach ($unscheduled_activities_qry-&result() as $activity) {
echo '&li onclick="set_activity(\''.addslashes($activity-&name).'\'';
echo ', '.$activity-&id.');"&'.$activity-&name.'&/li&';
echo '&/ul&';
}接下来，添加 find_unscheduled_activities() 方法以从数据库返回 autosuggest 结果。清单 14 显示了 ./system/application/models/mactivity.php 中的代码。
清单 14. 在数据库中查询未安排的活动
// Finds all unscheduled activities that match the passed string
function find_unscheduled_activities($str)
$this-&db-&select('id, name
FROM master_activity
WHERE name LIKE \''.$str.'%\'
AND id NOT IN
(SELECT master_activity_id FROM class_activity)
ORDER BY name', FALSE);
return $this-&db-&get();
}您还需要对 autosuggest &div& 应用样式并将其列成表，从而使 UI 更清晰、更便于单击列表元素。样式被添加到 ./assets/css/screen.css，如清单 15 所示。
清单 15. 使自动提示列表更清晰、更易于单击/***************/
/* Autosuggest */
.autosuggest {
border:1px solid #000000;
z-index:1;
.autosuggest ul li {
background-color:#FFFFFF;
list-style:
white-space:
.autosuggest ul li:hover {
background-color:#316AC5;
color:#FFFFFF;
background-image:url('../img/indicator.gif');
background-position:
background-repeat:no-
.autosuggest_input {
.table_header_add {
background-color:#FFCC66;
.odd_row_add {
background-color:#FFCC66;
}您现在已经完成了一半工作。您可以将字符输入到字段，检索一组匹配的活动。现在，实现用于选择、显示和保存课堂活动的代码。首先向 global.js 文件添加两个函数，用于设置活动名字段并显示一行活动信息。清单 16 展示了这两个函数的源代码。
清单 16. 获得并显示所选活动/* AUTOSUGGEST SET ACTIVITY */
// triggered by an onclick from any of the li's in the autosuggest list
// set the class_acitity field, wait and fade the autosuggest list
// then display the activity details
function set_activity(activity_name, master_activity_id) {
$('#class_activity').val(activity_name);
setTimeout("$('#autosuggest_list').fadeOut(500);", 250);
display_activity_details(master_activity_id);
/* AUTOSUGGEST DISPLAY ACTIVITY DETAILS */
// called by set_activity()
// get the HTML to display and display it
function display_activity_details(master_activity_id) {
// Ajax request to CodeIgniter controller "ajax" method "get_activity_html"
// post the master_class_activity parameter values
$.post('/index.php/ajax/get_activity_html',
{ 'master_activity_id':master_activity_id },
// when the Web server responds to the request
// replace the innerHTML of the select_activity element
function(result) {
$('#select_activity').html(result);
}代码还使用 Ajax 获得显示所选活动的表行。使用清单 17 的代码生成它的 HTML。
清单 17. 回传显示活动的 HTML 表
public function get_activity_html()
$this-&load-&model('MActivity', '', TRUE);
$this-&load-&library('table');
$requested_activity_id = $_POST['master_activity_id'];
$requested_activity_qry =
$this-&MActivity-&get_requested_master_activity($requested_activity_id);
// code leveraged from /controllers/activity.php manage_class_listing() method
// generate HTML table from query results
$tmpl = array (
'table_open' =& '&table&',
'heading_row_start' =& '&tr class="table_header_add"&',
'row_start' =& '&tr class="odd_row_add"&'
$this-&table-&set_template($tmpl);
$this-&table-&set_caption('&Add this Activity');
$this-&table-&set_empty("&");
$this-&table-&set_heading('&span class="date_column"&Date&/span&',
'&span class="activity_name_column"&Activity Name&/span&',
'&span class="address_column"&Address&/span&',
'City', 'Details');
$table_row = array();
foreach ($requested_activity_qry-&result() as $activity)
$m_id = $activity-&master_activity_
$table_row = NULL;
$table_row[] = ''.
'&form action="" name="form_'.$m_id.'" method="post"&'.
'&input type="hidden" name="master_activity_id" value="'.$m_id.'"/& '.
'&input type="text" name="activity_date" size="12" /& '.
'&input type="hidden" name="action" value="save" /& '.
'&/form&'.
'&span class="help-text"&format: MM-DD-YYYY&/span&&br/&'.
'&a href="" onclick="document.forms[\'form_'.$m_id.'\'].submit();'.
'"&save&/a&';
$table_row[] = '&input type="text" value="'.$activity-&name.
'" id="class_activity" onkeyup="autosuggest(this.value);"'.
'class="autosuggest_input" /&'.
'&div class="autosuggest" id="autosuggest_list"&&/div&';
$table_row[] = htmlspecialchars($activity-&address);
$table_row[] = htmlspecialchars($activity-&city);
$table_row[] = htmlspecialchars($activity-&details);
$this-&table-&add_row($table_row);
$requested_activities_table = $this-&table-&generate();
echo $requested_activities_
}这段代码在活动控制器中使用，并且只进行了少量修改，包括回传最终表（而不是返回表）。需要使用来自 ./system/application/models/mactivity.php 的如清单 18 所示的 SQL 查询。
清单 18. 返回所请求的主活动
// Returns a single master activity record
public function get_requested_master_activity($id)
$this-&db-&select('id as master_activity_id, name, address, city, details');
$this-&db-&where('id', $id);
return $this-&db-&get('master_activity');
}最后，尽管您可能已经添加了一项新的活动，但您还需要删除未安排的活动并按照升序重新对列表排序。MActivity 模型的更新后的 SQL 代码如清单 19 所示。
清单 19. 只返回未安排的活动
// Retrieve all master activity records
function list_class_activities($activity_id)
// get all records
if (!$activity_id) {
$this-&db-&select('ma.id as master_activity_id, ma.name,
ma.address, ma.city,
ma.details, ca.id as class_activity_id, ca.date
FROM master_activity ma
/*LEFT*/ JOIN class_activity ca ON ca.master_activity_id = ma.id
ORDER BY ca.date /*DESC*/, ma.name', FALSE);
return $this-&db-&get();
// get all records except the one being requested
$this-&db-&select('ma.id as master_activity_id, ma.name,
ma.address, ma.city,
ma.details, ca.id as class_activity_id, ca.date
FROM (SELECT * FROM master_activity
WHERE master_activity.id != '.$activity_id.') ma
/*LEFT*/ JOIN class_activity ca ON ca.master_activity_id = ma.id
ORDER BY ca.date /*DESC*/, ma.name', FALSE);
return $this-&db-&get();
}使用可视日历进行日期选择最后一项 UI 改进是使用一个可视日历替换用于输入日期的文本输入字段。为此，使用 jQuery UI Datepicker，这是来自 jQuery UI 库（jQuery 库的一个开源扩展）的一个流行插件。更新 ./system/application/views/template.php
文件，如清单 20 所示。
清单 20. 包括 jQuery UI Datepicker&!-- including the jQuery UI Datepicker and styles --&
&script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
type="text/javascript"&&/script&
&link href="/assets/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /&
&style type="text/css"&
/* jQuery UI sizing override */
.ui-widget {font-size:1}
&/style&注意，不需要下载该库，&script& 标记引用了 ，这是可供许多库（jQuery UI）使用的免费存储库。CSS 文件和映像已被配置为仅包含必要的样式（/download）。最后，jQuery UI 库在构建时假设正文字体的大小为 62.5%，因此可以覆盖默认设置来适当地调整大小。
Datepicker 将绑定到 HTML 内的一个 CSS 类或 ID。对于活动编辑函数，在 ./system/application/controllers/activity.php 中大概 210 行的位置向日期输入字段分配一个名为 date-picker 的类。代码如清单 21 所示。
清单 21. 分配 date-picker 类以进行编辑
// add the date-picker class to the date input field
'&input type="text" name="activity_date" size="12" value="'.
date('m/d/Y', strtotime($activity-&date)).'" class="date-picker" /& '.
'&input type="hidden" name="action" value="update" /& '.
'&/form&'.
'&span class="help-text"&format: MM/DD/YYYY&/span&&br/&'.对于活动添加函数，在 ./system/application/controllers/ajax.php 中大约 83 行的位置向日期输入字段分配同一个类，如清单 22 所示。
清单 22. 分配 date-picker 类以实现添加
// add the date-picker class to the date input field
'&input type="text" name="activity_date" size="12" class="date-picker" /& '.
'&input type="hidden" name="action" value="save" /& '.
'&/form&'.
'&span class="help-text"&format: MM/DD/YYYY&/span&&br/&'.最后，绑定 Datepicker 从而在添加或编辑一项课堂活动时显示出来。将放置在 global.js 文件的 $(document).ready() 函数内部的代码如清单 23 所示。
清单 23. 将 Datepicker 绑定到类
/* jQUERY UI CALENDAR PLUGIN */
// bind the Datepicker to the date-picker class
$(".date-picker").datepicker();现在尝试编辑课堂活动。当将光标放到日期输入字段时，将出现一个日历，允许您为活动选择一个日期。但是，在尝试添加一项活动时不会出现日历。这是因为活动添加 HTML 是在文档已加载完成（使用 Ajax）后编写的，因此 Datepicker 不会绑定到它的日期输入字段。要解决这个问题，需要在 Ajax 函数编写完 HTML 后将 Datepicker 绑定到日期输入字段。对 global.js 文件中的 display_activity_details()
函数的修改如清单 24 所示。
清单 24. 将 Datepicker 绑定到添加日期字段
function(result) {
$('#select_activity').html(result);
// because the add datepicker is not loaded with the DOM
// manually add it after the date input field is written
$(".date-picker").datepicker();
}现在，您可以使用 Datepicker 日历添加一个课堂活动。 结束语在本文中，您已了解到如何通过 jQuery 集成 DOM 操作以及通过 Ajax 实现无缝集成，从而极大地改进了应用程序的 UI。并且在许多情况下，实现这些改进的代码通常都很简单。现在，您可能希望进一步接受挑战，使用 Ajax 以内联的方式显示课堂活动，或者是实现在阅读本文时想到的任何其他 UI 想法，从而进一步改进应用程序。
下载描述名字大小创建 classroom 数据库的 SQL 文件15KB包括 CodeIgniter 文件在内的完整初始代码库411KB本文的初始 MVC 文件23KBjQuery 库 v1.4.245KBjQuery UI Datepicker 所需的 CSS 文件53KB包括 CodeIgniter 文件在内的完整最终代码库515KB本文的最终 MVC 文件124KB
“”（developerWorks，2008 年 8 月）：阅读 CodeIgniter 框架的出色简介。
“”（developerWorks，2010 年 1 月）：深入了解 CodeIgniter 和 MVC 架构。
：阅读 CodeIgniter 的在线文档。
：Web 开发专区提供了面向 Web 2.0 开发的工具和信息。
developerWorks 和：随时关注 developerWorks 技术活动和网络广播。
：下载 CodeIgniter 的最新版本。
：下载 MySQL 的最新版本。
：进一步了解并下载 jQuery 库的最新版本。
：了解更多并从 jQuery UI Web 站点下载更多小部件。
：下载这些版本并开始使用来自 DB2®、Lotus®、Rational®、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。
developerWorks: 登录
标有星（*）号的字段是必填字段。
保持登录。
单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。昵称长度在 3 至 31 个字符之间。
您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
(昵称长度在 3 至 31 个字符之间)
单击提交则表示您同意developerWorks 的条款和条件。 .
所有提交的信息确保安全。
IBM PureSystems(TM) 系列解决方案是一个专家集成系统
通过学习路线图系统掌握软件开发技能
软件下载、试用版及云计算
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=594356ArticleTitle=在 CodeIgniter 中使用 jQuerypublish-date=}