HTML传值到PHP全攻略：动态内容处理技巧

1. HTML表单与PHP数据提交的基础

最常见的数据提交方式是使用HTML的标签。当表单通过method="post"提交时，所有带有name属性的表单元素（如<input>, <textarea>, <select>)的值都会被打包发送到服务器。

HTML示例:

<form method="post" action="process.php">
    &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;请输入用户名&quot;&gt;
    &lt;textarea name=&quot;message&quot; placeholder=&quot;请输入消息&quot;&gt;&lt;/textarea&gt;
    <button type="submit">提交</button>
</form>

PHP接收示例 (process.php):

<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
    $username = $_POST['username'] ?? ''; // 使用null合并运算符处理未设置的情况
    $message = $_POST['message'] ?? '';

    echo "用户名: " . htmlspecialchars($username) . "<br>";
    echo "消息: " . htmlspecialchars($message);
    // 在此处可以将数据存储到数据库
}
?>

$_POST是一个PHP超全局数组，包含了所有通过POST方法提交的表单数据，其键是表单元素的name属性值。

2. 挑战：处理非表单元素和动态生成的值

在实际应用中，我们经常遇到以下场景：

• 需要获取一个div元素的文本内容或其自定义属性值。
• 某个值是根据用户在页面上的点击、选择等动态生成的，而不是直接从输入框中获取。
• 希望在不刷新页面的情况下发送数据。

例如，在提供的代码中，用户点击div.square或div.square2会调用JavaScript函数invert()或invert2()来改变图像样式。用户希望根据这些点击（代表的颜色选择）来获取一个值，并将其存储到数据库中。直接将div元素放入中并不能直接提交其“值”。

3. 解决方案：JavaScript作为桥梁

为了将非表单元素或动态生成的值发送到PHP，我们需要借助JavaScript在前端进行数据捕获和准备。

方法一：利用隐藏输入字段 (Hidden Input)

这是最常用且与传统表单提交兼容的方法。其核心思想是：

1. 在HTML表单中添加一个或多个<input type="hidden">字段。
2. 使用JavaScript监听用户交互或获取非表单元素的值。
3. 将获取到的值赋给对应的隐藏输入字段。
4. 当用户提交表单时，隐藏字段的值会随表单一同发送到PHP。

实现步骤与代码重构：

HTML修改： 在需要提交的表单内，添加一个隐藏输入字段，例如用于存储选中的颜色值。

<div class="row">
    <div class="col-5">
        <form method="post" action="customizer_bootstrap.php"> <!-- 假设提交到当前页面 -->
            <!-- 现有按钮 -->
            <button type="submit" name="submit_form">Submit</button>
            <!-- 新增隐藏字段用于存储颜色值 -->
            &lt;input type=&quot;hidden&quot; id=&quot;selected_color_value&quot; name=&quot;selected_color&quot; value=&quot;&quot;&gt;
        </form>
    </div>
</div>

注意：将 放入 标签内，并为其添加 name="submit_form" 以便PHP判断提交。

JavaScript修改： 修改invert()和invert2()函数，使其在改变图像样式的同时，更新隐藏字段selected_color_value的值。

<script>
    function changetext() {
        let bruh = document.getElementById('textpicker').value;
        document.getElementById('labeltext').innerHTML = bruh;
    }

    function invert() {
        document.getElementById("Gin_Label").style.filter = "invert(100%)";
        document.getElementById("labeltext").style.color = "white";
        // 当选择反色时，设置隐藏字段的值为 'inverted' 或 'white'
        document.getElementById('selected_color_value').value = 'inverted'; 
    }

    function invert2() {
        document.getElementById("Gin_Label").style.filter = "invert(0%)";
        document.getElementById("labeltext").style.color = "black";
        // 当选择正常色时，设置隐藏字段的值为 'normal' 或 'black'
        document.getElementById('selected_color_value').value = 'normal';
    }
</script>

PHP修改： 在PHP脚本中，通过$_POST['selected_color']获取隐藏字段的值。

<?php
session_start();
include("database.php"); // 确保database.php存在并配置正确

if($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['submit_form'])) // 检查是否是表单提交
{
    $text_custom = $_POST['text_custom'] ?? ''; // 从textpicker获取的值
    $selected_color = $_POST['selected_color'] ?? ''; // 从隐藏字段获取的颜色值
    $ingredient = $_POST['ingredient'] ?? 'none'; // 从select获取的值

    echo "自定义文本: " . htmlspecialchars($text_custom) . "<br>";
    echo "选定颜色: " . htmlspecialchars($selected_color) . "<br>";
    echo "额外配料: " . htmlspecialchars($ingredient) . "<br>";

    // 在此处将 $text_custom, $selected_color, $ingredient 等值存储到数据库
    // 例如：
    // $stmt = $conn->prepare("INSERT INTO custom_orders (text, color, ingredient) VALUES (?, ?, ?)");
    // $stmt->bind_param("sss", $text_custom, $selected_color, $ingredient);
    // $stmt->execute();
    // $stmt->close();
}
?>

方法二：使用AJAX进行异步提交 (可选/进阶)

如果希望在不刷新整个页面的情况下发送数据，可以使用AJAX（Asynchronous JavaScript and XML）。现代浏览器通常使用fetch API或XMLHttpRequest对象实现AJAX。

JavaScript (使用 fetch API) 示例：

// 假设有一个按钮点击后发送数据，而不是表单提交
document.getElementById('update_data_ajax').addEventListener('click', function() {
    let customText = document.getElementById('textpicker').value;
    let selectedColor = document.getElementById('selected_color_value').value; // 仍然可以从隐藏字段获取
    let ingredient = document.querySelector('select[name="ingredient"]').value;

    fetch('process_ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `text_custom=${encodeURIComponent(customText)}&selected_color=${encodeURIComponent(selectedColor)}&ingredient=${encodeURIComponent(ingredient)}`
    })
    .then(response => response.text())
    .then(data => {
        console.log('Success:', data);
        // 更新UI以显示成功信息
    })
    .catch((error) => {
        console.error('Error:', error);
        // 处理错误
    });
});

PHP (process_ajax.php) 示例：

PHP接收AJAX请求的方式与接收普通表单提交类似，都是通过$_POST。

<?php
session_start();
include("database.php");

if ($_SERVER['REQUEST_METHOD'] == "POST") {
    $text_custom = $_POST['text_custom'] ?? '';
    $selected_color = $_POST['selected_color'] ?? '';
    $ingredient = $_POST['ingredient'] ?? 'none';

    // 在此处进行数据验证、清理和数据库存储
    // 例如：
    // $stmt = $conn->prepare("INSERT INTO custom_orders (text, color, ingredient) VALUES (?, ?, ?)");
    // $stmt->bind_param("sss", $text_custom, $selected_color, $ingredient);
    // if ($stmt->execute()) {
    //     echo "数据提交成功！";
    // } else {
    //     echo "数据提交失败：" . $stmt->error;
    // }
    // $stmt->close();

    // 返回一个JSON响应或其他文本，供前端处理
    echo "AJAX请求成功处理。自定义文本: " . htmlspecialchars($text_custom);
} else {
    echo "无效的请求方法。";
}
?>

4. PHP服务器端数据处理与持久化

无论通过哪种方式接收到前端数据，PHP后端的处理流程是相似的：

1. 获取数据： 使用$_POST（或$_GET，如果使用GET方法）获取提交的值。
2. 验证数据： 检查数据是否符合预期格式、长度、类型等。例如，确保颜色值是预期的“inverted”或“normal”。
3. 清理数据： 使用htmlspecialchars()防止XSS攻击，使用mysqli_real_escape_string()（或更推荐的预处理语句）防止SQL注入。
4. 业务逻辑： 根据需求执行相应的业务逻辑，例如计算、更新会话等。
5. 持久化： 将数据存储到数据库。通常涉及建立数据库连接（如include("database.php")）、编写SQL查询（INSERT, UPDATE等）并执行。

数据库存储示例（使用MySQLi预处理语句）：

<?php
// database.php 示例内容
// $conn = new mysqli("localhost", "username", "password", "database_name");
// if ($conn->connect_error) {
//     die("连接失败: " . $conn->connect_error);
// }

// ... 在主PHP脚本中 ...
if($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['submit_form']))
{
    $text_custom = $_POST['text_custom'] ?? '';
    $selected_color = $_POST['selected_color'] ?? '';
    $ingredient = $_POST['ingredient'] ?? 'none';

    // 假设 $conn 是在 database.php 中建立的数据库连接
    // 准备SQL语句，使用占位符 (?)
    $stmt = $conn->prepare("INSERT INTO custom_orders (custom_text, selected_color, ingredient) VALUES (?, ?, ?)");

    // 检查语句是否准备成功
    if ($stmt === false) {
        die("准备语句失败: " . $conn->error);
    }

    // 绑定参数并指定类型 (s = string, i = integer, d = double, b = blob)
    $stmt->bind_param("sss", $text_custom, $selected_color, $ingredient);

    // 执行语句
    if ($stmt->execute()) {
        echo "数据已成功保存到数据库。";
    } else {
        echo "保存数据失败: " . $stmt->error;
    }

    // 关闭语句
    $stmt->close();
    // 关闭数据库连接 (如果不是在脚本结束时自动关闭)
    // $conn->close(); 
}
?>

5. 完整示例与代码演示

结合以上所有修改，以下是您的原始代码经过优化后的完整示例：

<?php
session_start();

// 确保 database.php 存在并包含数据库连接代码
// 例如：
// $conn = new mysqli("localhost", "root", "", "your_database_name");
// if ($conn->connect_error) {
//     die("数据库连接失败: " . $conn->connect_error);
// }
include("database.php"); 

if($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['submit_form'])) // 检查是否是表单提交
{
    $text_custom = $_POST['text_custom'] ?? ''; // 从textpicker获取的值
    $selected_color = $_POST['selected_color'] ?? ''; // 从隐藏字段获取的颜色值
    $ingredient = $_POST['ingredient'] ?? 'none'; // 从select获取的值

    // 输出接收到的数据进行调试
    echo "接收到的自定义文本: " . htmlspecialchars($text_custom) . "<br>";
    echo "接收到的选定颜色: " . htmlspecialchars($selected_color) . "<br>";
    echo "接收到的额外配料: " . htmlspecialchars($ingredient) . "<br>";

    // 假设 $conn 是在 database.php 中建立的数据库连接
    // 准备SQL语句，使用预处理语句防止SQL注入
    // 请根据您的数据库表结构调整 'custom_orders', 'custom_text', 'selected_color', 'ingredient'
    $stmt = $conn->prepare("INSERT INTO custom_orders (custom_text, selected_color, ingredient) VALUES (?, ?, ?)");

    if ($stmt === false) {
        // 如果准备语句失败，输出错误并终止
        die("准备SQL语句失败: " . $conn->error);
    }

    // 绑定参数
    $stmt->bind_param("sss", $text_custom, $selected_color, $ingredient);

    // 执行语句
    if ($stmt->execute()) {
        echo "数据已成功保存到数据库。";
    } else {
        echo "保存数据失败: " . $stmt->error;
    }

    // 关闭语句
    $stmt->close();
}

// 确保在所有数据库操作完成后关闭连接，或者让脚本结束时自动关闭
// if (isset($conn) && $conn) {
//     $conn->close();
// }
?>

<!DOCTYPE html>
<html>
<head>
    <title>Customiser</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="bootstrap customiser.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        /* 示例样式，根据您的bootstrap customiser.css进行调整 */
        .square, .square2 {
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            cursor: pointer;
            margin: 5px;
        }
        .square { background-color: black; }
        .square2 { background-color: white; }
    </style>
</head>

<body>
    <div class="containter">
        <div class="row">
            <div class="col-3 offset-1 d-flex justify-content-end" id="logo">
                <a href="http://localhost/website/test_1_customiser.php"><img id="logoclick" src="smiding logo.png"
                        alt="logo"></a>
            </div>

            <div class="col-7 offset-1" id="navbar">
                <a href="customizer_bootstrap.php">Customiser</a>
                <a href="news.html">News</a>
                <a href="about us.html">About us</a>
                <?php
                if (!empty($_SESSION['logged'])){
                    echo '<a href="account.php">Account</a>';
                }else{
                    echo '<a href="login.php">Account</a>';
                }
                ?>
            </div>
        </div>
        <br><br>
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Customiser</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-1">
                <img src="label.png" id="Gin_Label">
            </div>
            <div id="labeltext">
                text
            </div>

            <div class="col-md-4 offset-md-2">
                <div id="textchanger">
                    <h3>Text Picker</h3>
                    &lt;input type=&quot;text&quot; id=&quot;textpicker&quot; name=&quot;text_custom&quot;&gt;
                    &lt;input type=&quot;button&quot; id=&quot;update&quot; value=&quot;Click me!&quot; onclick=&quot;changetext()&quot;&gt;
                </div>
                <div id="colourchanger" class="row"></div>
                <h3>Colour Picker</h3>
                <div class="row">
                    <div class="col-md-1">
                        <div class="square" id="colourpicker" onClick="invert()"></div>
                    </div>
                    <div class="col-md-1 offset-md-1">
                        <div class="square2

好了，本文到此结束，带大家了解了《HTML传值到PHP全攻略：动态内容处理技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！