如何实现注册登录
的有关信息介绍如下:前端注册页面如何使用ajax向后台发送注册信息,后台服务器如何处理接收到的信息,并插入到数据库,并回馈是否成功的信息给前端页面。以及前端登录页面如何使用ajax向后台发送账号信息,后台服务器执行查询程序,并回馈是否成功的信息给前端页面。
首先,编写注册页面代码,并给输入框编写id名。
接下来,引入jquery文件,编写立即注册按钮的点击事件,并在前端页面做简单的表单验证,如果验证成功,再执行ajax请求,发送注册信息给后台服务器。
//引入jQuery文件
//编写script代码
//jQuery工厂函数
$(function(){
//立即注册按钮的点击事件
$("#registerBtn").click(function(){
//声明4个变量接收表单的数据
var username=$("#username").val();
var pwd=$("#pwd").val();
var repwd=$("#repwd").val();
var tel=$("#tel").val();
//前端的简单验证
//1.非空
if(username=="" || pwd=="" || repwd=="" || tel==""){
alert("输入不能为空");
//return后下面的代码不在执行
return;
}
//2.用户名长度3-16
if(username.length<3 ||username.length>16){
alert("用户名长度必须在3-16位");
return;
}
//3.密码和确认密码是否一致
if(pwd!=repwd){
alert("两次输入密码不一致");
return;
}
//执行ajax发送注册信息给后台服务器
$.ajax({
//地址
url:"register.php",
//方式
type:"post",
//参数
data:{
username:username,
pwd:pwd,
tel:tel
},
//成功的函数 注意res是返回的结果
success:function(res){
//如果结果是1,说明注册成功
if(res==1){
//弹出成功的窗
alert("注册成功");
}else{
//弹出失败的窗
alert("注册失败");
} } }) }) })
接下来,编写register.php文件。
//声明php文件
//引入封装的函数 注意:include_once引入方法可以防止文件名冲突
include_once "func.php";
//用3个变量来接收前端传递过来的数据
$username=$_POST['username'];
$pwd=$_POST['pwd'];
$tel=$_POST['tel'];
//插入数据库的sql语句
$sql="insert test(username,pwd,tel)value('{$username}','{$pwd}','{$tel}')";
//封装的插入函数insert(),里面封装好的连接数据库函数conn()
$res=insert(conn("127.0.0.1", "root", "root", "test"), $sql);
//执行插入函数,返回的结果是1或者是0,我们回馈给注册页面
echo $res;
?>
接下来,编写func.php文件,封装连接数据库的函数conn()和插入数据库的函数insert()和查询数据库的函数select()。
//声明php文件
//封装连接数据库函数conn(),注意:里面的5个参数,第一个为主机地址,如“127.0.0.1”,第二个为用户名,如“root”,第三个为密码,如“root”,
第四个为连接的数据库名,如“test”,第五个是我新加的参数,$char="utf8"表示为如果不填写第五个参数,它会默认为“utf8”,记住,所有的参数都要用英文状态的引号包起来。
function conn($host,$user,$pwd,$dbName,$char="utf8"){
//建立一个连接数据库的连接
$link=mysqli_connect($host, $user, $pwd, $dbName);
//如果这个连接返回的是false,就说明连接数据库失败
if($link==false){
//exit相当于return,后面的不再执行
exit("连接数据库失败,请检查参数是否正确");
}
//否者,就是连接成功
else{
//设置字符编码
mysqli_set_charset($link,$char);
//返回这个连接
return $link;
} }
//封装查询的函数
function select($link,$sql){
//执行sql语句的查询
$res=mysqli_query($link, $sql);
//如果执行查询失败
if($res==false){
//返回错误error和错误的编号,并且不再执行下面的代码
echo "error".mysqli_errno($link);
exit;
}
//查询成功
else{
//用变量$arr接收查询成功的结果集
$arr=mysqli_fetch_all($res);
//如果这个结果集不为空
if($arr){
//返回结果集给login.php文件
return $arr;
}
//如果这个结果集为空
else{
//返回null,空
return null;
} }
//执行查询函数,需要释放结果集
mysqli_free_result($arr);
//关闭数据库
mysqli_close($link);
}
//封装插入数据库的函数
function insert($link,$sql){
//执行sql语句的插入
$res=mysqli_query($link, $sql);
//如果执行插入失败
if($res==false){
//返回插入失败的错误error和错误编号,并且不再执行下面的代码
echo "error".errno($link);
exit;
}
//否者,执行插入成功
else{
//插入成功会产生一个受影响的行
$row=mysqli_affected_rows($link);
//如果受影响的行大于0,说明插入成功,也就是注册成功
if($row>0){
//给register.php返回1
return 1;
}
//否者
else{
//给register.php返回0,说明插入失败,也就是注册失败
return 0;
} }
//关闭数据库
mysqli_close($link);
}
?>
接下来,编写login.php文件.
//引入封装的函数 注意:include_once引入方法可以防止文件名冲突
include_once "func.php";
//用2个变量来接收前端传递过来的数据
$username=$_POST['username'];
$pwd=$_POST['pwd'];
//执行查询的sql语句,注意:传递的变量用引号和花括号包起来
$sql="select * from test where username='{$username}' and pwd='{$pwd}'";
//封装的查询函数select(),里面封装好的连接数据库函数conn()
$res=select(conn("127.0.0.1", "root", "root", "test"), $sql);
//执行查询函数,返回的结果是null就说明查询失败,返回0,也就是登录失败,否者查询成功,返回1,也就是登录成功。
if($res==null){
echo 0;
}else{
echo 1;
}
?>
接下来,编写登录页面代码,并给输入框编写id名。
接下来,引入jquery文件,编写登录按钮的点击事件,再执行ajax请求,发送账号信息给后台服务器。
//引入jQuery文件
//编写script代码
//jQuery工厂函数
$(function(){
//登录按钮的点击事件
$("#loginBtn").click(function(){
//声明2个变量接收表单的数据
var username=$("#username").val();
var pwd=$("#pwd").val();
//执行ajax发送账号信息给后台服务器
$.ajax({
//地址
url:"login.php",
//方式
type:"post",
//参数
data:{
username:username,
pwd:pwd
},
//成功的函数 注意res是返回的结果
success:function(res){
//1.代表成功0.代表失败
if(res==1){
//res等于了1就说明我们输入的用户名和密码是正确的,我们还可以使用confirm()的方法弹窗,选择确认或取消来判断是否进入首页。
var confirmp=confirm("是否现在登录");
//如果用户点击了确认
if(confirmp){
//跳转到index.html页面,并且在url的路径尾部添加上?username=你输入的用户名
window.location.href="index.html?username="+
$("#username").val();
} } } })
}) })
接下来,编写首页index.html页面代码,并给用户名标签编写id名。
接下来,引入jquery文件,编写将地址栏里面的用户名显示到网页中的方法。
//引入jQuery文件
//编写script代码
//用一个变量来接收地址栏的地址
var url=window.location.href;
//将地址栏的地址通过“?”拆分,并接收“?”后面的字符串
var str=url.split("?");
//将字符串再次通过“=”拆分,并接收“=”后面的字符串,也就是用户名
str=str.split("=");
//将用户名写入到id为users的标签中,显示在网页中
$("#users").text(str);