将Javascript输出发送到PHP以添加到数据库中

<form id="myForm">
  <input type="text" id="data" name="data" placeholder="输入要添加的数据">
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var data = document.getElementById("data").value; // 获取用户输入的数据

    // 使用Ajax发送数据到后端的PHP文件
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "addData.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        alert(xhr.responseText); // 显示后端返回的结果
      }
    };
    xhr.send("data=" + encodeURIComponent(data)); // 将数据编码后发送
  });
</script>

<?php
  // 获取前端发送的数据
  $data = $_POST["data"];

  // 数据验证和处理
  // ...

  // 连接数据库
  $servername = "数据库服务器地址";
  $username = "数据库用户名";
  $password = "数据库密码";
  $dbname = "数据库名";
  $conn = new mysqli($servername, $username, $password, $dbname);

  // 检查连接是否成功
  if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
  }

  // 执行插入操作
  $sql = "INSERT INTO 表名 (列名) VALUES ('$data')";
  if ($conn->query($sql) === TRUE) {
    echo "数据添加成功";
  } else {
    echo "数据添加失败: " . $conn->error;
  }

  $conn->close(); // 关闭数据库连接
?>