html通过点击事件将数据写入数据库

作为AI语言模型，我无法直接与数据库进行交互，但我可以提供一些思路：

1. 在HTML中通过JavaScript监听点击事件。

2. 在JavaScript中获取需要写入数据库的数据。

3. 将获取到的数据通过AJAX发送给后端。

4. 后端接收到数据后，进行数据库操作，将数据写入数据库。

具体实现可以参考以下代码：

HTML代码：

<button id="saveBtn">保存数据</button>

JavaScript代码：

document.getElementById("saveBtn").addEventListener("click", function() {
  // 获取需要写入数据库的数据
  var data = {
    name: "张三",
    age: 25,
    gender: "男"
  };
  
  // 发送AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "saveData.php", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(JSON.stringify(data));
});

PHP代码：

<?php
// 连接数据库
$pdo = new PDO("mysql:host=localhost;dbname=test", "root", "123456");

// 接收AJAX请求的数据
$data = json_decode(file_get_contents("php://input"), true);

// 将数据写入数据库
$stmt = $pdo->prepare("INSERT INTO users (name, age, gender) VALUES (:name, :age, :gender)");
$stmt->bindParam(":name", $data["name"]);
$stmt->bindParam(":age", $data["age"]);
$stmt->bindParam(":gender", $data["gender"]);
$stmt->execute();

// 返回操作结果
echo "数据保存成功";
?>

以上代码仅供参考，具体实现需要根据实际情况进行调整。同时，需要注意数据库操作的安全性和可靠性，避免出现数据泄露或数据损坏等问题。