如何用JavaScript和PHP实现MySQL（MariaDB）文本存取（无jQuery）

我来帮你一步步修复代码，实现你要的保存和取回功能，咱们逐个问题解决：

你的保存逻辑现在有几个关键错误，咱们逐个修正：

前端JS（send_data函数）的问题 #

• 用POST发送数据时，必须设置Content-Type请求头，否则PHP没法正确解析你发送的内容
• 直接发送纯文本的话，PHP无法通过$_POST获取到命名参数，得把数据拼成键=值的格式，比如text=你要保存的内容

修正后的send_data函数：

function send_data() {
  var php_file = "connection.php";
  var http_connection = new XMLHttpRequest();
  // 获取编辑框的文本，如果你需要保留HTML格式，把innerText改成innerHTML
  var editableContent = document.getElementById('editable').innerText;
  // 对内容进行URL编码，避免特殊字符导致的问题
  var postData = "text=" + encodeURIComponent(editableContent);

  http_connection.open("POST", php_file, true);
  // 必须设置这个请求头，PHP才能识别POST数据
  http_connection.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
  http_connection.onreadystatechange = function() {
    if(http_connection.readyState == 4 && http_connection.status == 200) {
      alert(http_connection.responseText);
    }
  }
  http_connection.send(postData);
}

后端PHP（connection.php）的问题 #

• 连接判断漏了$符号：if(!conn)应该是if(!$conn)
• 你用的是POST请求，但代码里用$_GET['text']获取数据，得改成$_POST['text']
• SQL语句完全错了：保存数据应该用INSERT或者UPDATE（如果要覆盖之前的内容），而不是SELECT
• 没有执行数据库写入操作，反而执行了查询，还直接echo结果集对象（这会输出乱码或者报错）
• 必须用预处理语句防止SQL注入，这是安全规范

另外，你需要先在MySQL里创建一个表，比如叫editable_text，用来存储内容：

CREATE TABLE editable_text (
    id INT AUTO_INCREMENT PRIMARY KEY,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

如果只需要保存一条最新的内容，也可以简化成单条记录的表，不过用自增ID更灵活。

修正后的PHP保存逻辑（咱们把保存和取回逻辑放在同一个PHP文件里，通过参数区分操作）：

<?php
$servername = "localhost";
$username = "mysql_user";
$password = "secure_password";
$dbname = "some_database";

// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);

// 检查连接
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}

// 处理保存请求（POST方法）
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!isset($_POST['text'])) {
        echo "没有收到要保存的内容";
        exit;
    }
    $content = $_POST['text'];

    // 使用预处理语句防止SQL注入
    // 这里用INSERT...ON DUPLICATE KEY是假设你想保留最新一条内容，若要保存所有历史记录，直接用INSERT即可
    $sql = "INSERT INTO editable_text (content) VALUES (?) ON DUPLICATE KEY UPDATE content = ?";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "ss", $content, $content);

    if (mysqli_stmt_execute($stmt)) {
        echo "内容保存成功！";
    } else {
        echo "保存失败: " . mysqli_error($conn);
    }
    mysqli_stmt_close($stmt);
}

// 处理取回请求（GET方法）
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    // 查询最新的一条内容
    $sql = "SELECT content FROM editable_text ORDER BY created_at DESC LIMIT 1";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) > 0) {
        $row = mysqli_fetch_assoc($result);
        echo $row['content'];
    } else {
        echo "还没有保存过内容";
    }
}

mysqli_close($conn);
?>

现在前端只需要发送GET请求到PHP，拿到返回的内容后，设置到编辑框里即可：

function retrieve_data() {
  var php_file = "connection.php";
  var http_connection = new XMLHttpRequest();
  
  http_connection.open("GET", php_file, true);
  
  http_connection.onreadystatechange = function() {
    if(http_connection.readyState == 4 && http_connection.status == 200) {
      // 如果需要还原HTML格式，把innerText改成innerHTML
      document.getElementById('editable').innerText = http_connection.responseText;
    }
  }
  http_connection.send();
}

你的HTML部分基本没问题，记得引入JS文件：

<body>
<div contenteditable="true" id="editable"></div>
<button onClick="send_data();">Save text</button>
<button onClick="retrieve_data();">Get text</button>
<script src="javascript.js"></script>
</body>

几个额外的注意事项 #

• 如果你的编辑框需要保留HTML格式（比如换行、加粗等），把所有的innerText改成innerHTML即可
• 数据库的用户名、密码、数据库名要改成你自己的真实信息
• 预处理语句一定要用，避免SQL注入风险
• 可以给保存按钮加个加载状态，防止重复点击

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