使用 HTML 表单提交数据并重定向到指定页面

本文介绍如何使用 HTML 表单收集用户输入的数据，并通过 PHP 代码将用户重定向到包含这些数据的子页面。通过修改表单提交方式和服务器端处理逻辑，可以轻松实现动态 URL 重定向，从而构建更加灵活和用户友好的 Web 应用。

HTML 表单

首先，我们需要创建一个 HTML 表单，该表单包含两个文本输入框和一个提交按钮。用户将在这些输入框中输入数据，然后点击提交按钮。

<form action="" method="POST">   <label for="first">第一个值:</label><br>   <input type="text" id="first" name="first"><br><br>    <label for="second">第二个值:</label><br>   <input type="text" id="second" name="second"><br><br>    <input type="submit" value="提交"> </form>

在这个表单中：

• action=”” 表示提交到当前页面。 稍后我们将使用 PHP 处理表单提交。
• method=”POST” 指定使用 POST 方法提交表单数据。
• input type=”text” 创建文本输入框，name 属性用于在服务器端访问输入的值。
• input type=”submit” 创建一个提交按钮。

PHP 处理重定向

接下来，我们需要使用 PHP 代码来处理表单提交，并将用户重定向到指定的子页面。将以下代码添加到 HTML 表单所在的页面顶部：

立即学习“前端免费学习笔记（深入）”；

<?php  if (isset($_POST['first'], $_POST['second'])) {   $firstValue = $_POST['first'];   $secondValue = $_POST['second'];    // 构建重定向 URL   $redirectURL = '/variant/' . $firstValue . '-' . $secondValue;    // 执行重定向   header('Location: ' . $redirectURL);   exit(); }  ?>

这段 PHP 代码的作用如下：

1. 检查表单是否已提交： isset($_POST[‘first’], $_POST[‘second’]) 检查 first 和 second 两个输入框的值是否已通过 POST 方法提交。
2. 获取输入值： 如果表单已提交，则从 $_POST 数组中获取 first 和 second 的值，并将其存储在变量 $firstValue 和 $secondValue 中。
3. 构建重定向 URL： 使用获取到的值构建重定向 URL。 在本例中，URL 的格式为 /variant/{firstValue}-{secondValue}。
4. 执行重定向： 使用 header(‘Location: ‘ . $redirectURL) 函数将用户重定向到构建的 URL。
5. exit()： 在重定向后立即调用 exit() 函数，以确保脚本停止执行，避免任何意外的输出。

注意事项：

• header() 函数必须在任何输出之前调用，包括 HTML 标记、空格或任何其他字符。 否则，重定向将无法正常工作。
• 为了安全起见，应对用户输入进行验证和清理，以防止恶意攻击，例如跨站脚本攻击（XSS）。
• 确保 /variant/ 路径是有效的，并且服务器配置正确以处理该路径上的请求。

示例：

如果用户在第一个输入框中输入 “red”，在第二个输入框中输入 “green”，然后点击提交按钮，则页面将重定向到 /variant/red-green。

总结：

通过结合 HTML 表单和 PHP 代码，可以轻松实现基于用户输入的动态 URL 重定向。 这种方法可以用于构建各种 Web 应用，例如产品筛选、搜索结果页面和自定义 URL 生成器。 记住始终验证和清理用户输入，以确保应用程序的安全性和可靠性。

以上就是使用 HTML