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 相关文章推荐
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
第十一节--重载
2006/11/16 PHP
中篇:安装及配置PHP
2006/12/13 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
php错误日志简单配置方法
2016/07/11 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
python创建和使用字典实例详解
2013/11/01 Python
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python如何生成各种随机分布图
2018/08/27 Python
python 多线程串行和并行的实例
2019/02/22 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
英语老师推荐信
2014/02/26 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
家长学校实施方案
2014/03/15 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers