PHP+Ajax asynchronous communication implements username and email verification to verify whether it has been registered (2 methods to implement)
- 高洛峰Original
- 2016-12-30 10:19:171591browse
Preface
It’s a bit unkind to write the code directly, so according to the tradition of the Chinese Dynasty, let’s describe it in the whole paragraph. . . . (My language expression ability is limited, please bear with me)
Function
is used when registering users on the website, mainly to asynchronously verify whether the user name or email entered by the user has been registered without refreshing.
You must have seen this function before. Most websites have it. I have always been interested in this function, so I have studied jQuery + Ajax in the past few days.
The function is not perfect, but it is enough to cope with it. Commonly used code (you can discover the more powerful functions by yourself)
File description
reg.php //Registration page
check_user.php //User verification page (GET, POST method optional)
jquery-1.7.1.js //Download address for jQuery file: http://code.jquery.com/jquery-1.7.1.js (right click and save as)
Code example
reg.php registration page (contains 2 methods, please choose one)
<!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 The asynchronous communication page code is as follows:
<?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{}
?>The above two methods also exist post and get two methods, so it can be said that there are 4 methods to choose from, which should be enough for ordinary applications.
In addition, other parameters in Ajax such as: request data type, ajax start operation and other events. Please refer to the ajax manual. I will not elaborate here. It is more complicated and recommended to use the first method.
Picture:
For more PHP+Ajax asynchronous communication to implement username and email verification to verify whether it has been registered (2 methods to achieve), please pay attention to PHP Chinese website!