【无标题】标签单击事件

复制代码
<!-- 给 a 标签一个 id,方便 JS 选择 -->
<a id="dianxueBtn" href="#" class="btn btn-list">点穴</a>

<script>
    // 获取 a 标签元素
    const dianxueBtn = document.getElementById('dianxueBtn');

    // 监听点击事件
    dianxueBtn.addEventListener('click', function(event) {
        // 1. 阻止 a 标签的默认跳转行为 (非常重要!)
        event.preventDefault();

        // 2. 准备要发送的数据
        const postData = {
            id: 123,          // 假设这是用户ID
            point: 'baihui',  // 假设这是穴位
            action: 'dianxue'
        };

        // 3. 使用 fetch API 发送 POST 请求
        fetch('/guanliyuanyemian_dianxue', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 如果你的后端需要 CSRF 保护,需要添加相应的头部
                // 'X-CSRFToken': getCSRFToken() 
            },
            body: JSON.stringify(postData) // 将数据转换为 JSON 字符串
        })
        .then(response => {
            // 4. 处理后端的响应
            if (!response.ok) {
                throw new Error('网络响应错误');
            }
            return response.json(); // 假设后端返回 JSON
        })
        .then(data => {
            console.log('点穴成功:', data);
            // 可以在这里给用户一个成功提示,比如弹出一个消息框
            alert('点穴成功!');
        })
        .catch(error => {
            console.error('点穴失败:', error);
            alert('点穴失败,请重试!');
        });
    });
</script>
相关推荐
学代码的真由酱8 分钟前
Java多用户一对一网页聊天室-测试报告
java·开发语言·功能测试·测试
人道领域11 分钟前
【LeetCode刷题日记】669.修剪二叉搜索树
开发语言·python·算法
xiaoshuaishuai81 小时前
C# AvaloniaUI动态显示图片
开发语言·c#
日光明媚1 小时前
一步生成视频!One-Forcing:DMD + 零成本 GAN,训练 200 步超越多步 SOTA
android·开发语言·kotlin
2301_803538951 小时前
Java读取Word图片的两种实用方法
java·开发语言·word
AugustRed2 小时前
Linux 运维常用命令大全(超全速查表)
运维·网络·php
bug和崩溃我都要3 小时前
Qt 封装 libmpv 全功能视频播放器开发指南
开发语言·qt·音视频
郝学胜-神的一滴3 小时前
Qt 高级开发 018:复刻经典登录界面布局与窗口美化全解析
开发语言·c++·qt·程序人生·用户界面
郝亚军3 小时前
IEEE 754 单精度浮点的SEM表示
开发语言·c++·算法
zhangjw343 小时前
第15篇:Java多线程零基础入门,进程线程、线程创建方式、线程生命周期、线程安全彻底吃透
java·开发语言·面试