PHP学习-前后端交互处理

chengstery

于 2023-12-06 03:00:00 发布

阅读量2.3k

点赞数 40

分类专栏： PHP学习文章标签： php 学习交互开发语言

本文链接：https://blog.csdn.net/fjc0214/article/details/134818826

版权

PHP学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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请求

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);

?>

chengstery

关注

40
点赞
踩
45

收藏

觉得还不错? 一键收藏
1
评论
PHP学习-前后端交互处理

前后端的交互过程就是HTTP协议的处理过程: 请求与相应的处理过程。单纯只有前端，无法使用后台服务器的能力，或者无法访问数据库。如果单纯只有后端，也无法形成业务流程，无法为客户产生价值。三种方式（1）资源获取型：GET请求 + URL地址（2）数据提交型：POST请求 + URL地址 + 请求正文（3）AJAX提交：利用异步提交的方式，再不刷新页面的情况下，提交数据给后台。
复制链接

扫一扫