使用AJAX提交表单时Textarea数据无法写入数据库问题排查

你使用的SimpleMDE编辑器会隐藏原始的<textarea>元素，替换为自身的Markdown编辑界面。当调用$("#newticket").serialize()序列化表单时，只会读取原始textarea的内容——但该内容并未被SimpleMDE同步更新，导致提交到后端的message字段为空，自然无法写入数据库。

以下两种修复方式任选其一即可：

方式一：提交前同步编辑器内容到原始textarea #

先将SimpleMDE实例保存为可访问变量，再在提交前手动把编辑器内容同步回原textarea：

// 保存SimpleMDE实例，确保NewTicket函数可访问
var simplemde = new SimpleMDE({
    element: document.getElementById("textarea"),
    spellChecker: false,
    hideIcons: ['side-by-side', 'fullscreen', 'preview', 'guide', 'image', 'link'],
});

function NewTicket() {
    // 关键操作：将编辑器内容同步至原始textarea
    simplemde.value(simplemde.value());
    
    var ticket = $("#newticket").serialize();
    $.ajax({
        type : "POST",
        data : ticket,
        url  : "ajax.php",
        success : function (e) {
            // 原有成功/失败逻辑保持不变
            if ($.trim(e) == "success") {
                swal({
                    title: "Success",
                    text: "Gotcha",
                    icon: "success",
                    closeOnClickOutside: false,
                    buttons: false,
                    timer: 3000
                });
                $("#new_ticket").hide();
                $("#success").show();
            } else if ($.trim(e) == "error") {
                swal({
                    title: "Error",
                    text: "Something went wrong.",
                    icon: "error",
                    closeOnClickOutside: false,
                    buttons: false,
                    timer: 3000
                });
            }
        }
    });
}

方式二：手动构建表单数据，直接添加编辑器内容 #

跳过表单序列化，手动组装所有字段并加入编辑器的值：

var simplemde = new SimpleMDE({
    element: document.getElementById("textarea"),
    spellChecker: false,
    hideIcons: ['side-by-side', 'fullscreen', 'preview', 'guide', 'image', 'link'],
});

function NewTicket() {
    // 获取表单现有字段的序列化数组
    var formData = $("#newticket").serializeArray();
    // 追加编辑器内容到表单数据中
    formData.push({name: 'message', value: simplemde.value()});
    
    $.ajax({
        type : "POST",
        data : formData,
        url  : "ajax.php",
        success : function (e) {
            // 原有逻辑保持不变
            if ($.trim(e) == "success") {
                swal({
                    title: "Success",
                    text: "Gotcha",
                    icon: "success",
                    closeOnClickOutside: false,
                    buttons: false,
                    timer: 3000
                });
                $("#new_ticket").hide();
                $("#success").show();
            } else if ($.trim(e) == "error") {
                swal({
                    title: "Error",
                    text: "Something went wrong.",
                    icon: "error",
                    closeOnClickOutside: false,
                    buttons: false,
                    timer: 3000
                });
            }
        }
    });
}

可以在ajax.php开头添加调试代码，确认后端是否收到message字段：

var_dump($_POST); exit;

提交表单后查看输出：如果message为空，说明是同步问题；如果有内容，再检查数据库写入逻辑（比如字段长度限制、编码兼容性等）。

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