利用jQuery实现邮箱注册时的重复用户名查询
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。——百度百科
jQuery提供了简单的Ajax实现方法,
jQuery.get( url [, data ] [, success ] [, dataType ] )
jQuery.post( url [, data ] [, success ] [, dataType ] )
复制代码
-
url 类型:String 一个包含发送请求的URL字符串,通常是要进行验证的后台语言借口页面。
-
data 类型:PlainObject or String 一个普通对象或字符串,通过请求发送给服务器,就是要拿去被验证的参数。
-
success 类型:Function( PlainObject data, String textStatus, jqXHR jqXHR ) 当请求成功后执行的回调函数。 如果提供dataType选项,那么这个success选项是必须的, 但这种情况下你可以使用null。回调函数中的data参数就是服务器响应的全部内容。
-
dataType 类型:String 从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, text,html)。
模仿126邮箱的注册效果,利用jQuery实现用户名的实时验证。首先需要在本地搭建服务器环境,这里使用了PHPnow,PHPnow可以同时创建Apache + PHP + MySQL,操作简单,很适合我这种小白使用。因为涉及到验证,要预先在数据库中创建一个表,利用表中的用户名进行比较判断。
思路:在input中输入用户名失去焦点后,在事件处理程序中利用jQuery的Ajax方法发送请求到服务器,请求中携带了填入input的值;在服务器的后台接口页面中,对请求中的参数与数据库中获取的用户名进行比较验证,并在响应中携带一个值(存放在data中),给前端做判断。
- HTML和CSS只做了简易的样式,效果图如下:
- Js部分
$("#clientName").blur(function(){
//失去焦点后,get方法发送到后台check.php接口页面,携带的参数是input的val()
$.get("system/check.php",{
checkedName: $("#clientName").val()
},function(data){
//data返回的是服务器传回的response,data的值用来判断是否已经存在此用户名
if(data == "non-existent"){
$("#info").show().css({
"width": 200,
"background": "lightyellow",
"color": "green"
}).html("恭喜,可以注册");
//如果可以注册,取消提交按钮的disabled
$("#btn").attr("diabled", false);
}else if(data == "existent"){
$("#info").show().css({
"width": 200,
"background": "lightyellow",
"color": "red"
}).html("已经被注册");
//如果已存在则不能注册,将提交的按钮disabled设置为true
$("#btn").attr("diabled", true);
}
})
});
$("#btn").click(function(){
//提交按钮添加点击事件,post方法向服务器发送请求注册,接口页面是reg.php,携带的参数是填入表单的用户名和密码
$.post("system/reg.php", {
names: $("#checkedName").val(),
codes: $("#codes").val()
},function(data){
if(data == "success"){
alert("success");
$("#checkedName ,#codes").val("");
$("#info").hide();
}else{
alert("fail");
}
})
})
复制代码
- PHP部分分为验证和注册两个文件
check.php
<?php
//定义变量存放获取的用户名
$checkedName = $_GET("checkedName");
//以下语句分别为:链接数据库、选择创建的数据库、设置中文字符集、要执行的sql命令、执行、返回执行结果的个数
mysql_connect("localhost", "root", "123456");
mysql_select_db("myfistdb");
mysql_query("SET NAMES UTF8");
//表示从clientNameForm表单中找到Cname等于获取的用户名的项
$sql = "SELECT * FROM clientNameForm WHERE Cname = '{$checkedName}'";
$result = mysql_query($sql);
$numOfResult = mysql_num_rows($result);
//通过结果个数返回用户名是否存在
if($numOfResult > 0 ){
echo "existent";
}else{
echo "non-existent";
}
?>
复制代码
reg.php
<?php
$names = $_POST["names"];
$codes = $_POST["codes"];
//以下语句分别为:链接数据库、选择创建的数据库、设置中文字符集、要执行的sql命令、执行、返回执行结果的个数
mysql_connect("localhost","root","123456");
mysql_select_db("student");
mysql_query("SET NAMES UTF8");
//表示向数据库中的clientNameForm中添加$names和$codes的内容分别到Cname,code两项中
$sql = "INSERT INTO clientNameForm (Cname,code) VALUE ('{$names}','{$codes}')";
//执行语句成功后,response中会返回数值1
$result = mysql_query($sql);
if($result == 1){
echo "success";
}else{
echo "fail";
}
?>
复制代码
效果图:
1.用户名已存在
2.用户名可用
3.注册成功
4.数据库中成功添加的数据
小结:Ajax在现在的网站中无处不在,电商网站的图片加载和长页面的懒加载等都使用了Ajax,原生的Ajax方法还没有去学,先利用jQuery把基本方法都弄清楚,再去了解原生。