U39U3912-30 09:15

PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

前 言
直接上代码有点不厚道、于是按照天朝传统,整段描述吧。。。。(本人语言表达能力有限,大家忍着看)
功 能
在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册。
这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax
整了一个功能不算完善,但足以应付普通使用的代码 (更牛的功能大家自己去发掘)
文 件 说 明
reg.php //为注册页面
check_user.php //为用户验证页面 (GET,POST方式任选)
jquery-1.7.1.js //为jQuery文件 下载地址:http://code.jquery.com/jquery-1.7.1.js (右键另存为即可)
代码示例
reg.php 注册页面(内含2种方式,请任选一种)
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PHP+Ajax 异步通讯注册验证</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script> <!--千万别忘记引用jQuery文件,否则无法执行-->
<script type="text/javascript">
$(function(){
//方式一 jQuery(普通应用时推荐,简单易用)
$("#user").blur(function(){ //文本框鼠标焦点消失事件
$.get("check_user.php?user="+$("#user").val(),null,function(data) //此处get方式 可换为post方式按需求调整,其他无需修改使用方式一样
{
$("#chk").html(data); //向ID为chk的元素内添加html代码
});
})
//方式二 aJax方式 (比较复杂,如无特殊需求推荐使用方式一)
$("#user").blur(function(){
$.ajax({
url:"check_user.php", //请求验证页面
type:"GET", //请求方式 可换为post 注意验证页面接收方式
data:"user="+$("#user").val(), //取得表文本框数据,作为提交数据 注意前面的 user 此处格式 key=value 其他方式请参考ajax手册
success: function(data)
{ //请求成功时执行操作
$("#chk").html(data); //向ID为chk的元素内添加html代码
}
});
})
})
</script>
</head>
<body>
<form id="reg" action="" method="post">
用户名:<input id="user" type="text" /> <span id="chk"></span>
</form>
</body>
</html>

check_user.php 异步通信页面 代码如下:
复制代码 代码如下:

<?php
header("Content-type:text/html;charset=gb2312");
//GET方式获取数据(取决于异步提交时提交方式)
if($_GET['user'])
{
$user=$_GET['user'];
//此处可进行数据库匹配,本次省略直接判断
if($user=="admin")
echo "<font color=red>用户名已被注册!</font>";
else
echo "<font color=red>用户名可以使用</font>";
}else{}
//POST方式获取数据(取决于异步提交时提交方式)
if($_POST['user'])
{
$user=$_POST['user'];
//此处可进行数据库匹配,本次省略直接判断
if($user=="admin")
echo "<font color=red>用户名已被注册!</font>";
else
echo "<font color=red>用户名可以使用</font>";
}else{}
?>

上面的2种方式分别又存在 post 和 get 两种方式,所以可以说有4种方式选择,应该可以满足普通应用了。
另外关于Ajax 内其他参数例如:请求数据类型,ajax开始操作等等事件。请参考ajax手册。这里不做阐述,较为复杂推荐使用第一种方式。
配 图:

      

官场书屋二维码

000
评论

为您推荐

  • Django中的Ajax

    Django 是由 Python 开发的一个免费的开源网站框架,可以用于快速搭建高性能,优雅的网站!AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的......
    U28U2812-30 09:15
  • 浅谈Python Opencv中gamma变换的使用详解

    伽马变换就是用来图像增强,其提升了暗部细节,简单来说就是通过非线性变换,让图像从暴光强度的线性响应变得更接近人眼感受的响应,即将漂白(相机曝光)或过暗(曝光不足)的图片,进行矫正。伽马变换的基本形式如下:大于1时,对图像的灰度分布直方图具有......
    U39U3912-23 21:46
  • java 验证码的生成实现

    java 验证码的生成实现所谓验证码,就是将一串随机产生的数字或符号,生成一幅图片, 图片里加上一些干扰,例如随机画数条直线或者画一些点,由用户肉眼识别其中的验证码信息,输入表单提交网站验证,验证成功后才能使用某项功能。验证码中之所以加上凌......
    U36U3612-23 22:00
  • ai怎么手绘风景照片效果的插画?

    美丽的风景照片是拍摄出来的,但是我们也可以绘制出来,该怎么绘制呢?今天,我们就来画一画风景照片,从中学习一下美丽风景的画法,掌握红色、黄色、绿色、紫色的搭配应用,体会一下蒙版工具的使用方法,详细请看下文介绍。软件名称:Adobe Illus......
    U14U1412-23 21:41
  • Win10快速预览版19536怎么手动更新升级?

    12月17日,微软向快速通道用户推送了Windows 10 Insider Preview 19536.1000 (rs_prerelease - 预发布)系统更新。注意:此W indows 10版本是第一个与Windows 10特定发行版......
    U34U3412-23 21:42
搜索

聊骚我们

试客网微信公众号 试客网公众号