jQuery的Ajax方法实现注册邮箱时用户名查询

ACodingIceBear
1,107 阅读3分钟

利用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把基本方法都弄清楚，再去了解原生。

avatar
文章
阅读
粉丝