dreamweaver 参数传递

Dreamweaver 本身不是一个编程语言，而是一个代码编辑器和开发环境，参数传递的功能实际上是依赖于你使用的 服务器端语言（如 PHP、ASP、ColdFusion）或 客户端语言（如 JavaScript）来实现的，Dreamweaver 的作用是帮助你更高效、更安全地编写和调试这些代码。

下面我将按照最常见的应用场景,为你梳理参数传递的方法。

服务器端页面之间的参数传递（最常见）

这是指从一个页面（如 page1.php）跳转到另一个页面（如 page2.php），并传递数据，主要有两种方式：GET 和 POST。

方法 1：GET 方法（通过 URL 传递）

GET 方法将参数直接附加在 URL 的后面，形如 page2.php?id=123&name=张三。

实现步骤 (以 PHP 为例):

1. 发送页面 (page1.php)：

   • 使用普通链接：

     <a href="page2.php?id=123&name=张三">点击跳转到详情页</a>

   • 使用 Dreamweaver 的服务器行为（推荐）：
     1. 在 Dreamweaver 中打开 page1.php，切换到 “实时视图” 或 “代码视图”。
     2. 打开 “服务器行为” 面板（窗口 > 服务器行为）。
     3. 点击 号，选择 “URL 转到” (Go To Detail Page)。
     4. 在弹出的对话框中：
        • “链接” (Link): 选择要应用此行为的链接或表单按钮。
        • “将记录传递到 URL” (Pass Recordset Parameters): 选择你要传递的数据来源（通常是你的记录集，如 Recordset1）。
        • “字段” (Field): 选择要作为参数的字段（如 id 字段）。
        • “转到 URL” (Go To URL): 输入目标页面 page2.php。
        • “传递 URL 参数” (Pass URL Parameters): 这里可以添加额外的固定参数，如 name=张三。
     5. 点击“确定”，Dreamweaver 会自动生成类似 <a href="page2.php?id=<?php echo $row_Recordset1['id']; ?>"> 的代码。

2. 接收页面 (page2.php)：

   • 在 Dreamweaver 中打开 page2.php。

   • 你可以直接通过 PHP 的 $_GET 超全局数组来获取参数。

     
     （图片来源网络，侵删）

     <?php
     // 检查 id 参数是否存在
     if (isset($_GET['id'])) {
     $user_id = $_GET['id'];
     echo "接收到的用户 ID 是: " . htmlspecialchars($user_id); // 使用 htmlspecialchars 防止 XSS 攻击
     // 你可以用这个 $user_id 去数据库查询用户详情
     // $sql = "SELECT * FROM users WHERE id = " . $user_id;
     }

   if (isset($_GET['name'])) { $user_name = $_GET['name']; echo "
   接收到的用户名是: " . htmlspecialchars($user_name); } ?>

   *   **使用 Dreamweaver 的服务器行为（用于查询）**：
       如果接收到的参数用于数据库查询，Dreamweaver 有更强大的工具。
       1.  在 `page2.php` 中，确保你已经创建了一个记录集（`rs_userDetails`）。
       2.  在 **“服务器行为”** 面板中，点击 `+` 号，选择 **“简单记录集” (Simple Recordset)** 或 **“高级记录集” (Advanced Recordset)**。
       3.  在 SQL 查询语句中，使用 `$_GET` 变量来构建查询条件。
           ```sql
           SELECT * FROM users WHERE id = <?php echo (isset($_GET['id']) ? (int)$_GET['id'] : 0); ?>

       *注意：`(int)` 是一种简单的类型转换和验证，确保传入的是数字，防止 SQL 注入，更安全的方式是使用预处理语句。*

方法 2：POST 方法（通过表单传递）

POST 方法将数据放在 HTTP 请求的主体中，不会显示在 URL 中，适合传递敏感信息或大量数据。

实现步骤 (以 PHP 为例):

1. 发送页面 (page1.php)：

   • 创建一个 HTML 表单。

     <form action="page2.php" method="post">
     <label for="username">用户名:</label>
     <input type="text" id="username" name="username">
     <br>
     <label for="email">邮箱:</label>
     <input type="email" id="email" name="email">
     <br>
     <button type="submit">提交</button>
     </form>

   • 使用 Dreamweaver 的服务器行为：
     1. 在 Dreamweaver 中设计好你的表单。
     2. 打开 “服务器行为” 面板，点击 号，选择 “插入记录” (Insert Record) 或 “更新记录” (Update Record)，这些行为通常会自动使用表单的 method="post"，并将表单字段的值作为参数传递给目标页面。

2. 接收页面 (page2.php)：

   • 在 PHP 中，通过 $_POST 超全局数组来获取数据。

     <?php
     if ($_SERVER["REQUEST_METHOD"] == "POST") { // 检查请求方法是否为 POST
     if (isset($_POST['username']) && isset($_POST['email'])) {
         $username = $_POST['username'];
         $email = $_POST['email'];
         echo "接收到的用户名: " . htmlspecialchars($username) . "<br>";
         echo "接收到的邮箱: " . htmlspecialchars($email);
         // 在这里处理数据，比如存入数据库
     }
     }
     ?>

客户端页面内的参数传递（不刷新页面）

这种传递方式通常用于创建动态的单页应用效果,无需重新加载整个页面。

方法 3：URL Hash () 传递

URL Hash（#后面的部分）不会发送到服务器，只在客户端浏览器中有效。

实现步骤:

1. 发送页面：

   <!-- 设置一个带有 hash 的链接 -->
   <a href="#section1?param1=value1&param2=value2">查看 Section 1</a>

2. 接收页面（实际上是同一个页面）：

   • 使用 JavaScript 监听 hashchange 事件或解析 window.location.hash 来获取参数。

     function getParamsFromHash() {
     // 获取 hash，并去掉开头的 #
     const hash = window.location.hash.substring(1);
     if (!hash) return {};
     // 分割键值对
     const params = hash.split('?')[1]; // 先去掉 section1
     if (!params) return {};
     const keyValuePairs = params.split('&');
     const result = {};
     keyValuePairs.forEach(pair => {
         const [key, value] = pair.split('=');
         if (key && value) {
             result[decodeURIComponent(key)] = decodeURIComponent(value);
         }
     });
     return result;
     }

   // 监听 hash 变化 window.addEventListener('hashchange', () => { const params = getParamsFromHash(); console.log(params); // 输出: { param1: "value1", param2: "value2" } // 在这里根据 params 动态更新页面内容 });

   // 页面加载时也执行一次 window.addEventListener('load', () => { const params = getParamsFromHash(); console.log(params); });

方法 4：LocalStorage / SessionStorage 存储

将数据存储在浏览器的本地存储中,可以在同源的不同页面或同一页面的不同时间点读取。

实现步骤:

1. 发送页面 (page1.html)：

   // 存储数据
   const dataToSend = { userId: 456, userName: '李四' };
   // localStorage 永久存储，除非手动清除
   localStorage.setItem('userData', JSON.stringify(dataToSend));
   // sessionStorage 在关闭标签页后失效
   // sessionStorage.setItem('userData', JSON.stringify(dataToSend));
   // 然后跳转到另一个页面
   window.location.href = 'page2.html';

2. 接收页面 (page2.html)：

   // 读取数据
   const userDataString = localStorage.getItem('userData');
   if (userDataString) {
       const userData = JSON.parse(userDataString);
       console.log(userData); // 输出: { userId: 456, userName: '李四' }
       // 在这里使用 userData 更新页面
   }

方法 5：JavaScript 对象传递（在同一个应用内）

如果你的页面是由 JavaScript 驱动的单页应用，你可以在 JavaScript 函数之间直接传递对象。

// 在某个事件处理函数中
function handleUserClick(user) {
    // user 是一个包含用户信息的对象
    console.log('用户被点击:', user.id, user.name);
    // 直接将这个对象传递给另一个处理函数
    displayUserProfile(user);
}
function displayUserProfile(userInfo) {
    document.getElementById('profile-name').innerText = userInfo.name;
    document.getElementById('profile-id').innerText = userInfo.id;
}
// 调用
handleUserClick({ id: 789, name: '王五' });

安全性最佳实践

无论使用哪种方法,安全性都是重中之重。

1. 防止 SQL 注入：

   • 永远不要直接将用户输入拼接到 SQL 查询中。
   • 使用 Dreamweaver 的“预定义语句” (Prepared Statements)：在创建高级记录集时，选择“预定义语句”选项，Dreamweaver 会帮你构建更安全的查询。
   • 使用类型转换：对于数字类型的参数，使用 (int) 或 (float) 进行强制转换。
   • 使用 PHP 内置函数：如 mysqli_real_escape_string()。

2. 防止 XSS (跨站脚本攻击)：

   • 在输出用户输入到 HTML 页面时，始终使用 htmlspecialchars() 函数。
   • echo htmlspecialchars($_GET['user_input'], ENT_QUOTES, 'UTF-8');

3. 验证数据：

   在使用任何接收到的数据之前,先验证它的类型、格式和长度是否符合预期，一个 ID 应该是数字，一个邮箱地址应该符合邮箱格式。

对于初学者,强烈建议优先使用 Dreamweaver 内置的服务器行为（如“URL 转到”和“记录集”），因为它们不仅简化了编码过程，还内置了许多安全考虑，随着你对代码理解的深入，再逐步过渡到手动编写更灵活、更安全的代码。