php 基于数据库的前后台交互登录、注册案例

Bertha 。 2021-08-19 17:31 422阅读 0赞

**注意后台php文件:不能有<-- -->注释内容，不能有除了echo json\_encode()外  
其他的echo 输出，否则无法数据无法传到前台!!!**

**sql语句中插入的变量要符合sql语句规则，即字符串必须是’ ‘或’’ '‘格式，而变量  
解析后没有’ ’ 或" "，要字符串拼接加上**

前台:

<html>
    <head>
    	<meta charset="utf-8">
    	<title>前后台交互案例</title>
    	<script src="jquery-3.4.1.js"></script>
    <body>
    	<span>用户名:</span><input type="text" class="uname"><br/>
    	<span>密码:</span><input type="password" class="pwd"><br/>
    	<button>用户登录</button>
    	<hr/>
    	<span>用户名:</span><input type="text" class="uname2"><br/>
    	<span>密码:</span><input type="password" class="pwd2"><br/>
    	<button>用户注册</button>
    
    	<script >
    	var $btns=$("button:first");
    	var $btn=$('button:last');
    	var $input=$(".uname");
    	var $pwdInput=$(".pwd");
    
    	var $input2=$(".uname2");
    	var $pwdInput2=$(".pwd2");
    登录------------------------------------------------------
    		$btns.click(function(){ 
    			$.ajax({ 
    				type:"post",
    				url:'5.php',
    				dataType:'json',
    				data:{ 
    					uname:$input.val(),
    					pwd:$pwdInput.val()
    				},
    				success:function(res)
    				{ 
    					if(res.infoCode==1)
    					{ 
    						alert("登录成功");
    						console.log(res);
    						window.location.href="https://blog.csdn.net/weixin_43294560";
    					}else if(res.infoCode==0)
    					{ 
    						alert('用户名或密码错误');
    						console.log(res);
    					}else{ 
    						alert('数据库连接失败');
    						console.log(res);
    					}
    				}
    
    			});
    		});
    注册-----------------------------------------------------
    	$btn.click(function(){ 
    		$.ajax({ 
    			type:'post',
    			dataType:'json',
    			url:'6.php',
    			data:{ 
    				zname:$input2.val(),
    				zpwd:$pwdInput2.val()
    			},
    			success:function(res){ 
    				console.log(res);
    				if(res.info==1)
    				{ 
    					alert('注册成功');
    				}else{ 
    					alert('注册失败');
    				}
    			}
    
    		});
    			console.log("a");
    
    	});
    	</script>
    
    </body>
    </head>
    </html>

验证登录后台:

<?php
    	
    	$username=$_POST['uname'];
    	$upwd=$_POST['pwd'];
    
    	$success=array('msg'=>'ok');
    
    	$con=mysqli_connect('localhost','root','dyl123','day2db');
    	$flag=false;
    
    	if($con){ 
    	
    		mysqli_query($con,'set names utf8');
    		mysqli_query($con,'set character_set_client=utf8');
    		mysqli_query($con,'set character_set_results=utf8');
    
    		$sql="select * from userinfo";
    		$res=$con->query($sql);
    
    		if($res->num_rows>0)
    		{ 
    			//获取数据库返回内容
    			$arr=[];
    			for($i=0;$row=$res->fetch_assoc();$i++)
    			{ 
    				$arr[$i]=$row;
    			}
    		
    
    			//验证用户密码
    			for($j=0;$j<count($arr);$j++)
    			{ 
    				if($arr[$j]['userName']==$username)
    				{ 
    					if($arr[$j]['password']==$upwd){ 
    						$success['infoCode']=1;
    						$flag=true;
    						break;
    					}
    				}
    			}
    			//都不匹配(不能直接使用'infoCode'判断，因为如果没有匹配，不会有'infoCode'属性)
    			if($flag!=true)
    			{ 
    				$success['infoCode']=0;
    			}
    
    
    		}else{ 
    			$success['infoCode']=2;
    		}
    
    
    	}else{ 
    		$success['infoCode']=2; //代表数据库连接失败
    	}
    	//反馈给前台
    	echo json_encode($success);
    
    ?>

验证注册后台

<?php
    	  $u1=$_POST['zname'];
    	  $p2=$_POST['zpwd'];
    
    
    
    	$success=array('msg'=>'ok');
    
    	$con=mysqli_connect('localhost','root','dyl123','day2db');
    	$flag=false;
    
    	if($con){ 
    
    		mysqli_query($con,'set names utf8');
    		mysqli_query($con,'set character_set_client=utf8');
    		mysqli_query($con,'set character_set_results=utf8');
    
    		$sql="insert into userinfo values('".$u1."','".$p2."')";
    
     		$res=$con->query($sql); //不是查询则返回布尔值
    
    		if($res)
    		{ 
    			$success['info']=1;
    			
    			
    		}else{ 
    			$success['info']=0;
    		}
    	//反馈给前台
    		echo json_encode($success);
    	}
    
    ?>