php ajax实现无刷新检测用户名是否可用
- WBOYオリジナル
- 2016-05-25 16:43:121063ブラウズ
在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者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>
<html>
<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手册,这里不做阐述,较为复杂推荐使用第一种方式.
本文链接:
收藏随意^^请保留教程地址.
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。