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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
学习jquery之一
Apr 27 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
extjs render 用法介绍
2013/09/11 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
webpack优化的深入理解
2018/12/10 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python执行子进程实现进程间通信的方法
2015/06/02 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Pyqt5实现英文学习词典
2019/06/24 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
关于母亲节的感言
2014/02/04 职场文书
教师自我反思材料
2014/02/14 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS