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

在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册。

前 言直接上代码有点不厚道、于是按照天朝传统,整段描述吧。。。。(本人语言表达能力有限,大家忍着看)

功 能在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者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种方式,请任选一种)

PHP+Ajax 异步通讯注册验证

$(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代码

}

});

})

})

用户名:

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

header("Content-type:text/html;charset=gb2312");

//GET方式获取数据(取决于异步提交时提交方式)

if($_GET['user'])

{

$user=$_GET['user'];

//此处可进行数据库匹配,本次省略直接判断

if($user=="admin")

echo "用户名已被注册!";

else

echo "用户名可以使用";

}else{}

//POST方式获取数据(取决于异步提交时提交方式)

if($_POST['user'])

{

$user=$_POST['user'];

//此处可进行数据库匹配,本次省略直接判断

if($user=="admin")

echo "用户名已被注册!";

else

echo "用户名可以使用";

}else{}

?>

上面的2种方式分别又存在 post 和 get 两种方式,所以可以说有4种方式选择,应该可以满足普通应用了。

另外关于Ajax 内其他参数例如:请求数据类型,ajax开始操作等等事件。请参考ajax手册。这里不做阐述,较为复杂推荐使用第一种方式。

配 图:

7ffbf5abba66b47f86c6ca0e5f9bf97b.png      

e91ebda0c12de09341120f0e26a41648.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 在前端页面中,通过监听输入框的键盘抬起事件,获取输入的用户名。 2. 发送一个ajax请求到后端,传递用户名参数。 3. 后端接收到请求后,查询数据库中是否存在该用户名。 4. 如果存在该用户名,则返回错误信息给前端。如果不存在,则返回成功信息。 5. 前端页面根据返回的信息,显示相应的提示,例如红色字体提示“用户名已存在”或绿色字体提示“用户名可用”。 以下是大致的示例代码: 前端页面: ``` <input type="text" id="username" onkeyup="checkUsername()" /> <div id="username_tip"></div> <script> function checkUsername() { var username = document.getElementById("username").value; var xhr = new XMLHttpRequest(); xhr.open('POST', 'check_username.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.result === 'fail') { document.getElementById("username_tip").innerHTML = "<span style='color: red;'>用户名已存在</span>"; } else { document.getElementById("username_tip").innerHTML = "<span style='color: green;'>用户名可用</span>"; } } } }; xhr.send('username=' + encodeURIComponent(username)); } </script> ``` 后端代码(使用PHP语言): ``` <?php $db_host = 'localhost'; $db_name = 'test'; $db_user = 'root'; $db_pass = ''; $username = $_POST['username']; try { $dsn = "mysql:host=$db_host;dbname=$db_name;charset=utf8mb4"; $pdo = new PDO($dsn, $db_user, $db_pass); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $pdo->prepare("SELECT COUNT(*) FROM users WHERE username = ?"); $stmt->execute([$username]); $count = $stmt->fetchColumn(); if ($count > 0) { echo json_encode(array("result" => "fail")); } else { echo json_encode(array("result" => "success")); } } catch(PDOException $e) { echo json_encode(array("result" => "error", "message" => $e->getMessage())); } ?> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值