PHP学习-前后端交互处理
PHP学习-前后端交互处理
- 一、简介
- 二、POST请求
- 三、AJAX请求
- 四、连接数据库
一、简介
前后端的交互过程就是HTTP协议的处理过程: 请求与相应的处理过程。单纯只有前端,无法使用后台服务器的能力,或者无法访问数据库。如果单纯只有后端,也无法形成业务流程,无法为客户产生价值。
三种方式
(1)资源获取型:GET请求 + URL地址
(2)数据提交型:POST请求 + URL地址 + 请求正文
(3)AJAX提交:利用异步提交的方式,再不刷新页面的情况下,提交数据给后台
二、POST请求
(1)必须要使用form标签将所有的表单元素包裹起来
(2)必须要在form标签中指定action属性(URL地址)
(3)必须要在form标签中指定method属性提交方式为POST(默认为GET)
(4)必须确保在form的标签内,有至少一个提交按钮
<form action="login.php" method="POST">
<div id="user">
<input type="text" name="username">
</div>
<div id="passwd">
<input type="password" name="password">
</div>
<div id="qg">
<input type="text" name="vcode">
</div>
<div id="btn">
<button type="submit">登录</button>
<!-- <input type="submit" value="登录"> -->
</div>
</form>
三、AJAX请求
(1)要引入jQuery的JS库
<script type="text/javascript" src="jquery-3.7.0.min.js"></script>
(2)不再需要form,只需要任意一个元素发起一个JS事件,让JS代码进行处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="jquery-3.7.0.min.js"></script>
<title>登录</title>
<style>
#box{
height: 900px;
background-image: url(../image/1.webp);
text-align: center;
}
#title{
width: 120px;
font-size: 50px;
text-align: center;
color: orangered;
float: left;
margin-top: 130px;
margin-left: 950px;
}
#user{
width: 350px;
height: 40px;
float: left;
margin-top: 20px;
margin-left:840px;
}
#passwd{
width: 350px;
height: 40px;
float: left;
margin-top: 10px;
margin-left:840px;
}
#qg{
width: 350px;
height: 40px;
float: left;
margin-top: 10px;
margin-left:840px;
}
input{
width: 350px;
height: 35px;
font-size: 20px;
text-align: center;
}
#btn{
width: 355px;
height: 45px;
float: left;
margin-top: 15px;
margin-left:840px;
background-color: rgb(129, 129, 255);
}
#btn button{
width: 355px;
height: 45px;
background-color: rgb(129, 129, 255);
font-size: 30px;
}
#def{
width: 350px;
height: 45px;
float: left;
margin-top: 350px;
margin-left:840px;
text-align: center;
}
#def span{
color: chartreuse;
font-size: 25px;
}
</style>
<script>
function doPost(){
// 获取表单元素的值
var username = $("#username").val();
var password = $("#password").val();
var vcode = $("#vcode").val();
//通过字符串拼接为一个请求正文
var param = "username=" + username + "&password=" + password + "&vcode=" + vcode;
//利用AJAX发送POST请求,并获取响应
$.post('login.php',param,function(data){
$("#username").val(data);
});
}
</script>
</head>
<body>
<div id="box">
<div id="title">登 录</div>
<div id="user">
<input type="text" name="username" id="username">
</div>
<div id="passwd">
<input type="password" name="password" id="password">
</div>
<div id="qg">
<input type="text" name="vcode" id="vcode">
</div>
<div id="btn">
<button onclick="doPost()">登录</button>
</div>
<div id="def">
<span>最终解释权归您所有</span>
</div>
</div>
</body>
</html>
四、连接数据库
<?php
/**
* 获取请求数据的方式
* GET:http://127.0.0.1/learn/php/login.php?username=12236012&password=12345&vcode=2424
* POST:http://127.0.0.1/learn/php/login.php + 请求正文
*/
//前端用GET请求发,后台用$_GET函数取,前端用POST请求发,后台用$_POST函数取,
// $username = $_GET['username'];
// $password = $_GET['password'];
// $vcode = $_GET['vcode'];
$username = $_POST['username'];
$password = $_POST['password'];
$vcode = $_POST['vcode'];
/**
* 验证码的验证过程应该先于数据库操作(用户名和密码的验证)
*/
if($vcode !== '0000'){
die("vcode-error");
}
//echo $username . '-' . $password . '-' . $vcode;
/**
* 在PHP中如何访问MySQL数据库?MySQLi和PDO
* 1.连接到数据库
* 2.执行SQL语句(CRUD)
* 3.处理SQL语句的结果
* 4.关闭数据库
* 事实上,所有的IO操作,都需要实现打开和关闭的两个基本操作,文件读写、网络访问、数据库访问
*/
$conn = mysqli_connect('127.0.0.1','root','你的数据库密码','learn') or die("数据库连接不成功.");
//设置编码格式的两种方式
mysqli_query($conn,"set names utf8");
mysqli_set_charset($conn,'utf8');
//拼接SQL语句并执行它
$sql = "select * from user where username='$username' and password='$password'";
$result = mysqli_query($conn,$sql); //result获取到的查询结果,称为结果集
if(mysqli_num_rows($result) == 1){
echo "login-pass";
}else{
echo "login-fail<br/>";
}
//关闭数据库
mysqli_close($conn);
?>
普通网友: 好文!我也写了一篇获取【大厂面试真题解析、核心开发学习笔记、最新全套讲解视频、实战项目源码讲义、学习路线简历模板】的文章
CSDN-Ada助手: 恭喜您写完了第17篇博客!标题“PHP学习-Session&Cookie”听起来非常有趣。我很高兴看到您持续不断地创作,并分享您在PHP学习方面的见解。在下一步的创作中,我建议您可以尝试探索更多与Session和Cookie相关的技术应用,或者深入研究PHP在Web开发中的其他方面。期待您的下一篇博客,谦虚地说,我相信您的创作会给读者们带来更多的启发和收获!
CSDN-Ada助手: 恭喜您写了第18篇博客!标题为“PHP学习-前后端交互处理”。您的持续创作令人钦佩。在这篇博客中,您讨论了PHP学习中的前后端交互处理,这对于想要更深入了解PHP的读者来说无疑是非常有益的。 在下一步的创作中,我建议您可以探索更多PHP相关的主题,如数据处理、性能优化、安全性等等。这些主题将使您的博客更加全面,并吸引更多不同背景的读者。 尽管您在这个领域已经有很多知识,但请保持谦虚的态度。PHP学习是一个不断进步的过程,我们都有不断学习和提高的空间。期待看到您未来更多精彩的博客!
CSDN-Ada助手: 非常感谢您的分享,恭喜您完成了第19篇博客!标题中提到的渗透测试中的SQL注入和代码与命令注入是非常有挑战性的话题。您通过深入探讨这些技术,无疑为读者提供了宝贵的知识和见解。 在下一步的创作中,我建议您继续探索其他类型的安全漏洞和攻击技术,例如跨站脚本攻击(XSS)或跨站请求伪造(CSRF)。这些主题同样引人入胜,可以进一步丰富您的博客内容。 希望您能继续保持谦虚的态度,持续分享您的经验和见解。期待能够阅读到更多精彩的博客文章!
CSDN-Ada助手: 恭喜你撰写了第20篇博客!你对渗透测试和SQL注入的理解和分享让人受益匪浅。我希望你可以继续保持创作的热情,不仅可以深入探讨现有主题,还可以尝试挖掘一些其他类型的注入攻击,比如XSS或者CSRF等等。期待你更多的精彩内容!