【无标题】标签单击事件

复制代码
<!-- 给 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>
相关推荐
1024奇点3 小时前
【仓颉语言入门 · 第二篇 第 22 课】
开发语言·ide·开源
Warren2Lynch4 小时前
C4 模型详解:利用 Visual Paradigm 可视化软件架构的综合指南
开发语言·uml
Knight_AL5 小时前
Java 文件下载时文件名中的 `#` 被转换成 `%23`?一次 URL 编码与解码问题排查
java·开发语言
FRing035 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
by209996 小时前
C++ 智能指针的所有权与使用
开发语言·c++·经验分享
砚底藏山河6 小时前
python量化自定义周期 K 线合成
java·开发语言·数据库·python·金融
IT召唤狮6 小时前
开源企业级零信任项目Pangolin,零信任能挡住PHP核弹漏洞吗?
开发语言·开源·php
知已难寻6 小时前
03 · OpenStack的计算管理 Nova
运维·服务器·开发语言·云原生·云计算·openstack·开源软件
Rover Ramble6 小时前
C++ 用互斥锁实现读写锁
开发语言·c++
码流子7 小时前
移动收费怎么做?手持终端+App+收费中心的架构实践
java·开发语言·架构