jQuery入门:用jQuery实现AJAX式的注册UI

Choose a Username:

Email Address:

Choose Password:

Re-type Password:

先是引用了两个js文件,一个是jQuery.js类库.可以从http://jQuery.com下载到最新版本.另外一个是我自己编写的js文件,内容在下面会列出;接着用js定义了一个数组,主要是针对各个控件定义其提示语句.

最后就是由input和div语句所组成的控件区了.input控件的class都为 register-input是为了统一响应的处理方便.div的id是input的id加上前缀组成.也是为了程序上的方便,您在阅读下面的代码时会发现.
此HTML中只做了AJAX演示.不有考虑提交后的处理工作.所以HTML中不包含FORM.

register.js :

$(document).ready(function(){
$(”input.register-input”).click(function(){
var id = $(this).attr(’id’);
$(’#note-’+id).text(info[id]);
$(’#note-’ + $(this).attr(’id’)).css(’visibility’, ‘visible’);
});
$(’input.register-input’).blur(function() {
$(’#note-’ + $(this).attr(’id’)).css(’visibility’, ‘hidden’);
});

$(’#verify’).blur(function() {
if ($(this).val() != $(’#password’).val())
{
$(’#note-verify’).css(’visibility’, ‘visible’);
$(’#note-verify’).text(”请两次密码输入一致!”);
}
else
{
$(’#note-’ + $(this).attr(’id’)).css(’visibility’, ‘hidden’);
}
});
$(’#username’).blur(function(){
if($(’#username’).val().length > 0)
$.post(’username_check.php’,{username:$(’#username’).val()},function(data){
if(data == ‘error’)
{
$(’#note-username’).text(”您所填写的用户名已经被人使用了!”);
$(’#note-username’).css(’visibility’, ‘visible’);
}
else
{
$(’#note-username’).text(”恭喜! 您所填写的用户名仍然可用!”);
$(’#note-username’).css(’visibility’, ‘visible’);
}
});

});
});

$(document).ready()是整个js的开始,有点C语言里main的意思.是当HTML文件完成下载后,DOM(Document Object Model,文档对象模型)建立完成后调用的函数.

上面说到过jQuery基于事件建立响应函数的方式相当不错,整体的组成应该是:

$(控件描述限定字符) .事件(function(参数){实现代码});

如：$(’#username’).blur(function(){…});
所谓控件描述限定字符是通过控件的类别(如input,div等)和class值(前面加.表示)与id值(前面加#表示)来确定事件的主体.

事件类型比较多,具体可以参考http://jQuery.com和http://visualjquery.com/ 中的相应文档.

当然你也可以直接调用写好的函数,组成就变成了:

$(控件描述限定字符) .事件(函数名(参数));

JS中的代码相当简单,相信你一看就了解.在此我提一下代码中实现AJAX的异步传输的地方:

$.post(’username_check.php’,{username:$(’#username’).val()},function(data){…. });

$.post是以POST的方法实现异步传输方式进行数据传送与接收的函数,是将username:xxxxx这样JSON(JavaScript Object Notation)格式的数据值传给 username_check.php.得到的结果由function(data){…}内的代码来处理.我在username_check.php中只做了最简单的比较.只要不是”LZP”(本人姓名之缩写)即正常通过.在现实使用中肯定是要对收到的用户名在数据库中查询比对.在此为了简单不表.其内容如下:
username_check.php :
if($_POST["username"] == “LZP”)
{
echo “error”;
}
else
{
echo “ok”;
}
?>

这样就实现了一个基本的ajax form表.

这是我第一篇有关AJAX学习文档,不到位和欠水平之处请拍砖指出.多谢!

对于WORD PRESS的插件COOL CODE.还有个小问题,各段代码前后加上< coolcode language=”xxx” >和< /coolcode >显示正常.但再次编辑无法保存该段信息,望各位(特别是老僧)给予指示,批示以及明示. 多谢!

测试网址:

http://www.liuzhongping.com/ajax-register/register.html