1 前后端连接操作数据
1.1 原生form表单登录操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>登录-默认的form表单</h2>
<form action="05form.php" method="get">
<p>
<input type="text" name="username" id="">
</p>
<p>
<input type="text" name="password" id="">
</p>
<input type="submit" value='登录'>
</form>
</body>
</html>
页面:05form.php
<?php
//1.接受前端传递的值
$user=$_GET['username'];
$pwd=$_GET['password'];
// echo "输入的值:$user $pwd";
//2.连接数据库 查询语句
$con=mysqli_connect('localhost','root','','2006');
if($con){
mysqli_query($con,'set names utf8');
//sql语句 查询 输入的账号和密码
$sql="select * from userinfo where username='$user' and password='$pwd' ";
$res=mysqli_query($con,$sql);
// var_dump($res);
if($res->num_rows >0){
echo '登录成功';
}else{
echo '账号或者密码错误';
}
}else{
echo '连接失败';
}
?>
1.2 jquery-ajax登录
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>登录--jquery-ajax</h2>
<div class="info"></div>
<form>
<p>
<input type="text" name="" id="username">
</p>
<p>
<input type="text" name="" id="password">
</p>
<button type='button' id='login'>登录</button>
</form>
<h2>注册窗口</h2>
<form>
<p>
<input type="text" name="" id="uname">
</p>
<p>
<input type="text" name="" id="upwd">
</p>
<button type='button' id='register'>注册</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
//1.点击按钮
$('#login').click(function () {
var uname = $('#username').val();
var umima = $('#password').val();
//2. 创建ajax() 请求服务器
$.ajax({
type: 'get',//type请求的方式 get/post
url: '07login_ajax.php',//url请求的后台的地址 工作:http://192.168.xxx.xxx/xxx/
data: {//{}对象
//注意:参数1:后端定义的接受的变量 参数2:前端传递的值变量
username: uname,
password: umima
},
//返回的函数 返回成功的结果
success: function (res) {//res 形参
console.log(res);//1 2
// $(".info").html(res)
if (res == 1) {
$(".info").html('登录成功').css('color', 'green')
} else {
$(".info").html('账号或者密码错误').css('color', 'red')
}
}
})
})
//2.注册功能
//3.修改密码
</script>
</body>
</html>
//后台php代码
<?php
//定义变量接受前端传递的值
$user =$_GET['username'];
$pwd=$_GET['password'];
// echo "输入:$user $pwd";
//2.连接数据库 查询语句
$con=mysqli_connect('localhost','root','','2006');
// var_dump($con)
if($con){
mysqli_query($con,'set names utf8');
//sql语句 查询 输入的账号和密码
$sql="select * from userinfo where username='$user' and password='$pwd' ";
$res=mysqli_query($con,$sql);
// var_dump($res);
if($res->num_rows >0){
// echo '登录成功';
echo 1;//1成功
}else{
// echo '账号或者密码错误';
echo 2;//失败
}
}else{
echo '连接失败';
}
?>