咨询：点击按钮向send.php私密发送对应<li>元素值的实现方法

要完成点击按钮私密发送对应卡片值到send.php的需求，按以下步骤操作即可：

1. 阻止按钮默认跳转 #

你的发送按钮是<a>标签，点击会默认触发页面跳转，所以第一步要阻止这个行为，避免页面刷新中断操作。

2. 绑定点击事件并提取对应值 #

给所有.btn绑定点击事件，点击时通过DOM遍历定位到同一卡片内的.price元素，提取它的文本内容。

3. 用POST请求私密传参 #

使用fetch API（或传统XMLHttpRequest）以POST方式发送数据，POST的参数会放在请求体内，不会暴露在URL中，满足私密要求。

完整代码示例 #

HTML（保留原结构即可）

<div class="cards">
    <div class="card shadow">
      <ul>
        <li id="one" class="price bottom-bar">1</li>
        <li><a class="btn" href="">Send</a></li>
      </ul>
    </div>   
    <div class="card active">
      <ul>
        <li id="two" class="price bottom-bar">2</li>
        <li><a class="btn" href="">Send</a></li>
      </ul>
    </div>
    <div class="card shadow">
      <ul>
        <li id="three" class="price bottom-bar">3</li>
        <li><a class="btn" href="">Send</a></li>
      </ul>
    </div>
  </div>

JavaScript代码

// 选中所有发送按钮
const sendBtns = document.querySelectorAll('.btn');

// 给每个按钮绑定点击事件
sendBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    
    // 向上找到当前按钮所在的ul，再获取里面的价格值
    const targetValue = this.closest('ul').querySelector('.price').textContent.trim();
    
    // 发送POST请求到send.php
    fetch('send.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      // 对参数编码，避免特殊字符导致的请求异常
      body: `value=${encodeURIComponent(targetValue)}`
    })
    .then(res => {
      if (res.ok) {
        console.log('数据发送成功');
        // 这里可以添加成功后的提示逻辑，比如弹出提示框
      } else {
        console.error('发送失败，请检查网络或后端服务');
      }
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
  });
});

后端send.php接收数据示例

<?php
// 获取POST传递的参数
$receivedValue = $_POST['value'] ?? '';

// 处理数据（比如存入数据库、记录日志等）
if (!empty($receivedValue)) {
  // 这里写你的业务逻辑
  echo "收到的值：" . $receivedValue;
}
?>

关键细节说明 #

• closest('ul')：从当前按钮向上查找最近的<ul>元素，确保只获取同一卡片内的价格值，不会误取其他卡片的数据。
• encodeURIComponent()：对参数进行URL编码，避免特殊字符（如中文、符号）导致的请求错误。
• POST请求：数据放在请求体中，不会像GET请求那样暴露在URL里，完全满足私密发送的需求。

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