如何通过HTML图片链接生成差异化通用页面？解决PHP传参问题

问题根源 #

<input type="image">是表单提交按钮，点击时默认会把鼠标点击的坐标以name_x和name_y的形式提交，所以你拿到的是坐标数值，而非设置的名称——这是它的固有行为，换下面几种方法就能解决。

方案1：用<a>标签包裹图片（最简便） #

直接用链接标签包裹图片，把要传递的标识放在URL的GET参数里，点击图片直接跳转，后端读取参数展示对应内容。

HTML代码：

<a href="detail.php?item=anaheim">
  <img src="/logos/anaheim.png" alt="Anaheim">
</a>
<a href="detail.php?item=apple">
  <img src="/logos/apple.png" alt="Apple">
</a>
<!-- 其余30个图片按此格式复制，替换item值和图片路径即可 -->

PHP代码（detail.php）：

<?php
// 获取传递的标识
$item = $_GET['item'] ?? '';

// 根据标识展示对应内容
switch($item) {
    case 'anaheim':
        echo '<div style="background: url(/bg/anaheim.jpg) center/cover; padding: 2rem;">Anaheim相关信息...</div>';
        break;
    case 'apple':
        echo '<div style="background: url(/bg/apple.jpg) center/cover; padding: 2rem;">苹果相关信息...</div>';
        break;
    // 依次添加其余30个case
    default:
        echo '<p>无效的内容请求</p>';
}
?>

方案2：表单+隐藏字段（适合必须用表单的场景） #

如果一定要用表单提交，就在表单里加一个隐藏输入框，把要传递的名称存在其中，点击图片提交表单时，隐藏字段的值会被一同提交。

HTML代码：

<form action="detail.php" method="get">
  <input type="hidden" name="item" value="anaheim">
  <input type="image" src="/logos/anaheim.png" alt="Anaheim">
</form>
<form action="detail.php" method="get">
  <input type="hidden" name="item" value="apple">
  <input type="image" src="/logos/apple.png" alt="Apple">
</form>
<!-- 其余30个图片按此格式复制 -->

PHP代码

和方案1的detail.php完全一致，直接读取$_GET['item']即可。

方案3：JavaScript处理点击事件（适合需要交互逻辑的场景） #

给每个图片绑定点击事件，手动构造带参数的跳转URL，灵活度更高。

HTML代码：

<img src="/logos/anaheim.png" alt="Anaheim" onclick="jumpToDetail('anaheim')">
<img src="/logos/apple.png" alt="Apple" onclick="jumpToDetail('apple')">
<!-- 其余30个图片按此格式复制 -->

<script>
function jumpToDetail(itemName) {
    // 构造跳转URL并跳转
    window.location.href = `detail.php?item=${itemName}`;
}
</script>

PHP代码

同样和方案1的detail.php一致。

内容的提问来源于stack exchange，提问作者Matthew