如何通过AJAX向PHP脚本发送WYSIWYG编辑器HTML数据并存入数据库？

嘿，我来帮你梳理下怎么正确完成这个流程——你已经迈出了从iframe抓取编辑器内容、用AJAX发送请求的第一步，但还有几个关键的调整和最佳实践要注意，确保数据安全传输并正确存储到数据库：

一、前端AJAX请求的优化 #

首先，你当前用的是GET请求把内容拼在URL里，这有两个大问题：

1. URL长度限制：富文本内容可能很长，GET请求的URL有长度上限（不同浏览器/服务器一般在几千字符左右），超过后内容会被截断。
2. 特殊字符乱码/冲突：富文本里的<、>、&、空格等特殊字符直接拼进URL会导致编码错误，甚至破坏请求结构。

所以更推荐用POST请求，并且正确处理内容编码：

方法1：用FormData（推荐，更简洁安全）

// 获取编辑器内容
var product_description = richTextField.document.getElementsByTagName('body')[0].innerHTML;

// 用FormData构造请求数据
var formData = new FormData();
formData.append('desc', product_description);

// 发起AJAX请求
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200) {
            // 请求成功，给用户反馈
            alert('内容保存成功！');
            // 也可以解析后端返回的JSON数据做更复杂处理
            // var response = JSON.parse(this.responseText);
        } else {
            // 请求失败，提示错误
            console.error('保存失败，状态码：' + this.status);
            alert('保存失败，请稍后重试');
        }
    }
};
xmlhttp.open('POST', 'product_edit_parse.php', true);
xmlhttp.send(formData);

方法2：手动编码表单数据

如果不想用FormData，记得对内容做URL编码，并设置正确的请求头：

var product_description = richTextField.document.getElementsByTagName('body')[0].innerHTML;
// 对富文本内容进行URL编码
var encodedDesc = encodeURIComponent(product_description);
var query_string = "desc=" + encodedDesc;

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    // 状态处理同上
};
xmlhttp.open('POST', 'product_edit_parse.php', true);
// 设置表单数据的Content-Type
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(query_string);

二、后端PHP的安全处理与数据库存储 #

在product_edit_parse.php里，你需要完成接收数据、安全过滤、插入数据库这几步，重点要防SQL注入和XSS攻击：

1. 接收POST数据：用$_POST['desc']获取内容，记得做空值判断避免报错。
2. 过滤恶意HTML（防XSS）：因为是富文本，不能直接转义所有HTML（否则会丢失编辑格式），推荐用HTMLPurifier库过滤掉恶意脚本（比如<script>、onclick属性等），只保留安全的HTML标签。
3. 用预处理语句插入数据库：绝对不要直接把变量拼进SQL语句，防止SQL注入。

示例代码（用PDO连接数据库，更安全易用）：

<?php
// 1. 连接数据库（替换成你的数据库信息）
$dsn = 'mysql:host=你的数据库地址;dbname=你的数据库名;charset=utf8mb4';
$username = '数据库用户名';
$password = '数据库密码';
try {
    $pdo = new PDO($dsn, $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die('数据库连接失败：' . $e->getMessage());
}

// 2. 接收并处理编辑器内容
$description = $_POST['desc'] ?? ''; // 空值判断，避免未定义索引报错

// 3. 用HTMLPurifier过滤恶意HTML（自行安装后引入库）
require_once 'path/to/HTMLPurifier.auto.php';
$config = HTMLPurifier_Config::createDefault();
$purifier = new HTMLPurifier($config);
$cleanedDesc = $purifier->purify($description);

// 4. 预处理语句插入数据库
try {
    $stmt = $pdo->prepare("INSERT INTO products (product_description) VALUES (:desc)");
    $stmt->bindParam(':desc', $cleanedDesc);
    $stmt->execute();
    
    // 返回成功响应给前端
    echo json_encode(['success' => true, 'message' => '内容已保存']);
} catch(PDOException $e) {
    echo json_encode(['success' => false, 'message' => '数据库错误：' . $e->getMessage()]);
}
?>

三、数据库字段设置注意事项 #

• 字段类型：别用VARCHAR，它有长度限制，推荐用TEXT（最大65535字符）或LONGTEXT（最大4GB）来存储富文本内容。
• 字符集：确保你的数据库和表的字符集设置为utf8mb4，这样可以支持emoji和所有Unicode字符，避免中文或特殊字符乱码。

额外小提示 #

• 如果你用的是成熟的WYSIWYG编辑器（比如CKEditor、TinyMCE），它们一般自带getData()方法来获取内容，比自己抓iframe的body更可靠。
• 前端要确保iframe已经加载完成再获取内容，比如放在onload事件里，避免获取到空内容。

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