如何通过jQuery处理链接标签事件并实现数据存储后跳转？

核心问题原因 #

点击<a>标签时，浏览器会立即执行默认跳转行为，导致你的jQuery代码还没来得及执行（甚至alert都不会触发），页面就已经跳转到目标地址了。

优化实现方案 #

要实现「先执行存库逻辑，再跳转」，需要按以下步骤处理：

1. 前端jQuery代码优化

• 先阻止标签的默认跳转行为
• 用$(this)获取当前点击的元素（避免多个同class链接时取错值）
• 使用jQuery的.data()方法读取data-*属性（比.attr()更规范）
• 通过AJAX异步请求后端接口完成存库，请求成功后再手动跳转

$(document).on('click', '.link-container', function(e) {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    
    // 获取当前点击链接的data-setenumber值
    const setNumber = $(this).data('setenumber');
    // 保存目标跳转地址
    const targetUrl = $(this).attr('href');

    // 发送AJAX请求到后端存库
    $.ajax({
        url: 'save_to_db.php', // 后端处理存库的接口地址
        type: 'POST',
        data: { setNumber: setNumber },
        success: function(response) {
            // 存库成功后，手动跳转到目标页面
            window.location.href = targetUrl;
        },
        error: function(xhr, status, error) {
            // 存库失败的处理，比如提示用户
            alert('数据保存失败，请重试');
            // 也可以选择直接跳转或者停留在当前页
            // window.location.href = targetUrl;
        }
    });
});

2. 后端存库示例（以PHP为例）

创建save_to_db.php文件，接收前端传的setNumber并写入MySQL：

<?php
// 数据库连接配置
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 接收前端传的参数
$setNumber = $_POST['setNumber'] ?? '';
if (!empty($setNumber)) {
    // 预处理SQL，防止SQL注入
    $stmt = $conn->prepare("INSERT INTO 你的表名 (set_number) VALUES (?)");
    $stmt->bind_param("i", $setNumber); // 假设set_number是整数类型，若为字符串用"s"
    $stmt->execute();
    $stmt->close();
}

$conn->close();
// 返回成功响应
echo json_encode(['status' => 'success']);
?>

额外注意事项 #

• 必须处理AJAX请求的错误情况，避免用户点击后无响应
• 后端要做参数校验和SQL注入防护（用预处理语句是最优方案）
• 不推荐使用async: false同步请求，会阻塞页面交互
• 若存在多个同class的链接，$(this)能确保获取当前点击元素的属性值，不会出现取值错误

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