jquery ajax 检测用户注册时用户名是否存在


Posted in Javascript onNovember 03, 2009

首先需要一个添加年级的页面,暂时叫grade.htm
这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件)。
下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的。
grade.htm

<input type="text" size="6" name="NAME" id="NAME"/><font color="red">*</font> 
<span id="gradeInfo"></span>

当用户输入信息以后,进入验证环节,看看我们的验证grade.js是怎么写的。
grade.js
/** 
* 验证用户名是否重复的js 
* 
* @name grade.js 
* @author jason<msn:x334@eyou.com> 
* @use 验证用户名是否存在 
* @todo 
*/ 
$(document).ready(function(){ 
checkConfirm(); 
}); 
//验证用户名是否存在 
function checkConfirm(){ 
$("#NAME").blur(function(){ 
var gradename = $(this).val(); 
var changeUrl = "GradeAdmin.php?action=check&gradename="+gradename; 
$.get(changeUrl,function(str){ 
if(str == '1'){ 
$("#gradeInfo").html("<font color=\"red\">您输入的用户名存在!请重新输入!</font>"); 
}else{ 
$("#gradeInfo").html(""); 
} 
}) 
return false; 
}) 
}

上面这段js文件,我只解释几个比较关键的地方。
1、$("#NAME").blur的含义是当grade.htm里的id为NAME的表单输入完以后触发动作。
2、$(this).val()的含义是取得id为NAME的表单里的值。
3、$.get(changeUrl,function(str)的含义是:运行ajax后,changeUrl是要连接的程序地址,str是程序
计算结束以后得到的显示结构。
4、$("#gradeInfo").html的含义是给id为gradeInfo的标签写入html文件。id为gradeInfo的标签就是指
的grade.htm里的id为gradeInfo的标签,显示的内容会出现再这个标签所在的位置。
再看看GradeAdmin.php的计算形式。
GradeAdmin.php
复制代码
if($frm_action == 'check') 
{ 
$gradeName = $_GET['gradename']; 
$gradeAdminObj = new Services_GradeAdmin($db); 
//根据$gradeName去判断是否再数据库里存在填入的用户名字,如果存在返回1,如果 
不存在返回0,这个返回值是传到grade.js里。 
$gradeCheck = $gradeAdminObj->getGradeByName($gradeName); 
if(is_numeric($gradeCheck)){ 
echo '1'; 
}else{ 
echo '0'; 
} 
exit(); 
}

这就是判断用户注册时用户名是否已存在问题
Javascript 相关文章推荐
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 #Javascript
Jquery AJAX 框架的使用方法
Nov 03 #Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 #Javascript
jQuery get和post 方法传值注意事项
Nov 03 #Javascript
js window.onload 加载多个函数的方法
Nov 02 #Javascript
深入认识javascript中的eval函数
Nov 02 #Javascript
javascript 按回车键相应按钮提交事件
Nov 02 #Javascript
You might like
PHP里的中文变量说明
2011/07/23 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python 切片和range()用法说明
2013/03/24 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python编程实现希尔排序
2017/04/13 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python字典改变value值方法总结
2019/06/21 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
pygame实现打字游戏
2021/02/19 Python
联谊活动总结
2014/08/28 职场文书
施工安全协议书范本
2014/09/26 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
python基础之类方法和静态方法
2021/10/24 Python
使用Django框架创建项目
2022/06/10 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript