【无标题】标签单击事件

复制代码
<!-- 给 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 分钟前
IDV云桌面vDisk机房部署方案模板特性解析
java·开发语言·devops
飞翔的SA12 分钟前
从6.75%到100%!大模型Function Calling终极方案:Harness工程如何驯服
开发语言·ai·llm·harness
耿雨飞25 分钟前
Python 后端开发技术博客专栏 | 第 09 篇 GIL 深度解析与并发编程实战 -- 多线程、多进程、协程的选型
开发语言·python
Stark-C26 分钟前
NAS音乐必备神器,全平台音乐收割机!极空间部署『Go Music DL』
开发语言·后端·golang
Ulyanov30 分钟前
像素迷宫:路径规划算法的可视化与实战
大数据·开发语言·python·算法
常利兵1 小时前
大文件上传不再卡顿:Spring Boot 分片上传、断点续传与进度条实现全解析
spring boot·后端·php
念何架构之路1 小时前
图解常见网络I/O复用模型
服务器·网络·php
枫叶丹41 小时前
【HarmonyOS 6.0】ArkWeb PDF预览回调功能详解:让PDF加载状态可控可感
开发语言·华为·pdf·harmonyos
小陈工1 小时前
数据库Operator开发实战:以PostgreSQL为例
开发语言·数据库·人工智能·python·安全·postgresql·开源
耿雨飞1 小时前
Python 后端开发技术博客专栏 | 第 07 篇 元类与类的创建过程 -- Python 最深层的魔法
开发语言·python