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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
理解jQuery stop()方法
Nov 21 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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获取QQ头像并显示的方法
2014/12/23 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
vue 组件中slot插口的具体用法
2018/04/03 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
python语言的优势是什么
2020/06/17 Python
经济系大学生求职信
2013/10/01 职场文书
毕业自荐书
2013/12/09 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
小学毕业感言300字
2014/02/19 职场文书
化学教学随笔感言
2014/02/19 职场文书
读群众路线心得体会
2014/03/07 职场文书
先进班组材料范文
2014/12/25 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
房贷工资证明范本
2015/06/12 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python