自学内容网 自学内容网
自学内容网 > 正文

【PHP】基于表单前后端交互

🕗 发布于 2024-07-23 10:12 php  交互  javascript  网络  安全  

 一、基于HTTP的交互过程

基于HTTP的前后端交互过程通常包括以下几个步骤：

  1. 客户端（通常是浏览器）发送一个HTTP请求到服务器。这个请求包含了请求的方法（如GET、POST等）、请求的URL、请求头（包含一些元数据，如用户代理、接受的内容类型等）以及可选的请求体（通常在POST或PUT请求中使用）。

  2. 服务器接收到请求后，根据请求的方法和URL，调用相应的后端代码来处理请求。这个过程可能涉及到读取数据库、执行业务逻辑、调用其他服务等操作。

  3. 后端代码处理完请求后，会生成一个HTTP响应。这个响应包含了响应的状态码（如200表示成功，404表示未找到等）、响应头（包含一些元数据，如内容类型、缓存控制等）以及响应体（即返回给客户端的数据）。

  4. 服务器将HTTP响应发送回客户端。

  5. 客户端接收到响应后，会根据响应的状态码和内容进行相应的处理。例如，如果状态码是200，客户端可能会解析响应体中的数据并显示在页面上；如果状态码是404，客户端可能会显示一个错误页面。

  6.  三种前后端交互模式（1）资源获取型：GET请求+URL地址 （2）数据提交型：POST请求+URL地址+请求正文 （3）AJAX提交：利用异步提交的方式，在不刷新当前页面的情况下，提交数据给后台

二、使用HTML标签创建登录界面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度等于设备宽度，初始缩放比例为1 -->
    <title>登录页面</title> <!-- 设置网页标题 -->
    <style>
        body {
            font-family: Arial, sans-serif; <!-- 设置字体样式 -->
            background-color: #f0f0f0; <!-- 设置背景颜色 -->
        }
        .container {
            width: 300px; <!-- 设置容器宽度 -->
            padding: 16px; <!-- 设置内边距 -->
            background-color: white; <!-- 设置背景颜色 -->
            border: 1px solid #ccc; <!-- 设置边框样式 -->
            margin: 100px auto; <!-- 设置外边距，上下边距为100px，左右自动居中 -->
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); <!-- 设置阴影效果 -->
        }
        input[type=text], input[type=password] {
            width: 100%; <!-- 设置输入框宽度为100% -->
            padding: 12px 20px; <!-- 设置内边距 -->
            margin: 8px 0; <!-- 设置外边距，上下边距为8px，左右为0 -->
            display: inline-block; <!-- 设置为行内块元素 -->
            border: 1px solid #ccc; <!-- 设置边框样式 -->
            box-sizing: border-box; <!-- 设置盒模型为border-box -->
        }
        button {
            background-color: #4CAF50; <!-- 设置按钮背景颜色 -->
            color: white; <!-- 设置按钮文字颜色 -->
            padding: 14px 20px; <!-- 设置内边距 -->
            margin: 8px 0; <!-- 设置外边距，上下边距为8px，左右为0 -->
            border: none; <!-- 设置边框为无 -->
            cursor: pointer; <!-- 设置鼠标指针样式为手形 -->
            width: 100%; <!-- 设置按钮宽度为100% -->
        }
        button:hover {
            opacity: 0.8; <!-- 设置鼠标悬停时按钮透明度为0.8 -->
        }
    </style>
</head>
<body>
    <div class="container"> <!-- 创建一个容器 -->
        <label for="uname"><b>用户名</b></label> <!-- 创建用户名标签 -->
        <input type="text" placeholder="输入用户名" name="uname" required> <!-- 创建用户名输入框 -->

        <label for="psw"><b>密码</b></label> <!-- 创建密码标签 -->
        <input type="password" placeholder="输入密码" name="psw" required> <!-- 创建密码输入框 -->

        <button type="submit">登录</button> <!-- 创建登录按钮 -->
    </div>
</body>
</html>

三、 后端PHP获取请求代码

1.GET的方式请求

<?php
$username = $_GET['username'];
$password = $_GET['password'];

echo $username.'<br>';
echo $password;


?>

2.POST方式请求

<?php
$username = $_POST['username'];
$password = $_POST['password'];
echo $username.'<br>';
echo $password;
?>

3.直接通过AJAX实现异步请求 

  • 1.首先需要安装jQuery库，下载地址：Download jQuery | jQuery
  • 2.引入 jQuery库<script type="text/javascript" src="./jquery-3.7.1.min.js"></script> 
  • 3.无需通过form表单进行提交，只需通过元素发起任意JS事件，让JS代码进行处理
  • 4.前端HTML标签代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <script type="text/javascript" src="./jquery-3.7.1.min.js"></script>
    <script>
        function do_post(){
            var username = $("#username").val();
            var password = $("#password").val();
            var param = "username=" + username +"&password=" + password;
            $.post('login.php',param,function(data){
                window.alert(data)
            });

        }
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 400px;
            padding: 30px;
        }
        .login-container h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .submit-btn {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>登录</h1>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" name="username">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码" name="password">
            </div>
            <input type="submit" value="登录" class="submit-btn" onclick="do_post()">
    </div>
</body>
</html>
  • 5.后端PHP代码 
<?php
$username = $_POST['username'];
$password = $_POST['password'];
echo $username.'---'.$password;


?>

每篇一言：万物初发清净明，可知此芽成何草。


原文地址：https://blog.csdn.net/weixin_54799594/article/details/140621395

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024