如何通过onclick事件结合PHP调用图片的alt属性？

你的需求是点击图片打开新页面，同时传递数组里的数据，想用图片的alt属性（这里存的是数组索引）来传递信息，但当前代码存在服务器端代码（PHP）和客户端代码（JavaScript）混写的错误，根本无法正常工作，下面给你两种可行的实现方式：

方式一：URL参数直接传递（最简单） #

不需要用session，直接把要传递的索引拼在跳转链接里，新页面直接从URL获取参数即可。

调用页面代码 #

<?php
// 假设$nevek是你的目标数组
$nevek = ["图1", "图2", "图3", "图4"];
$i = 0;
for($j=0;$j<4;$j++)
{
    // 把数组索引$i拼到跳转链接的参数中
    echo '<a href="reszletes.php?kod=' . $i . '" title=""> 
            <img src="' . $nevek[$i] . '.png" class="card-img-top" alt="' . $i . '"> 
          </a>';
    $i++;
}
?>

新页面（reszletes.php）代码 #

<?php
// 获取URL中的kod参数，没有则为空
$kod = $_GET['kod'] ?? '';
// 这里可以用$kod去目标数组中取出对应的数据
echo $kod;
?>

方式二：使用Session传递（适合隐藏参数的场景） #

如果不想把参数暴露在URL里，可以用AJAX先把数据存到session，再跳转，步骤稍复杂：

调用页面代码 #

<?php
$nevek = ["图1", "图2", "图3", "图4"];
$i = 0;
for($j=0;$j<4;$j++)
{
    echo '<img src="' . $nevek[$i] . '.png" class="card-img-top" alt="' . $i . '" onclick="goToDetail(this)">';
    $i++;
}
?>

<script>
function goToDetail(img) {
    const kod = img.alt;
    // 通过AJAX把数据传给服务器存入session
    fetch('save_session.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'kod=' + kod
    }).then(() => {
        // 确认session存入后跳转页面
        window.location.href = 'reszletes.php';
    });
}
</script>

新增save_session.php文件 #

<?php
session_start();
if(isset($_POST['kod'])) {
    $_SESSION['kod'] = $_POST['kod'];
}
?>

新页面（reszletes.php）代码 #

<?php
session_start();
$kod = $_SESSION['kod'] ?? '';
echo $kod;
// 用完销毁该session，避免后续请求干扰
unset($_SESSION['kod']);
?>

原代码的核心错误说明 #

你把PHP代码写在了JavaScript函数里，这是完全错误的：

• PHP是服务器端代码，页面加载时就执行完毕，浏览器根本看不到PHP代码
• JavaScript是客户端代码，在浏览器中运行，不认识session_start()、$_SESSION这些PHP语法，直接写会触发语法报错

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