Ajax无法获取CKEditor数据问题求助（PHP环境）

开发基于Ajax与PHP的功能时，无法从CKEditor获取数据。点击按钮后页面显示空白且出现“2022”字样，相关代码如下：

前端表单代码 #

<form>     
<textarea id="editor" name="Content" required></textarea> 
</div>
<button type="button" id="btn-answer" class="dislike">Answer</button>
</form>

Ajax.js代码 #

$("#btn-answer").click(() =>
{
  var message = $("#editor").val(); 

  
    $.ajax({
      type: "post", 
      url: "data/answer.php", 
      data: {  
        'Content':message
       },
       beforeSend:function(){
            $(".loader").show();
       },
      success: function(data){
       $("#msg").html(data);
       $(".loader").hide();
      },
    });
  
   
});

answer.php代码 #

<?php 

$message = $_POST['Content']; 
$status = 1; 

$query = mysqli_query($con, "INSERT INTO answer(userid, answer,topicid,active)VALUES('$Userid','$message','$topicid','$status')"); sleep(3);
if($query){
    echo "<div class='alert alert-dismissible fade show alert-info' role='alert'>You have the questions successfully !</div>";
}else{
    echo "<div class='alert alert-dismissible fade show alert-danger' role='alert'>Something Went Wrong Please Try Again !</div>";   
}

?>

1. 修正CKEditor内容获取方式 #

CKEditor会替换原生textarea，无法通过$("#editor").val()获取编辑内容，必须使用官方API：

• 对于CKEditor 4：

var message = CKEDITOR.instances.editor.getData();

• 对于CKEditor 5（以ClassicEditor为例）：

var message = ClassicEditor.instances.editor.getData();

确保实例IDeditor与textarea的ID一致。

2. 修复JS语法错误 #

原Ajax代码中click(() =存在语法错误，需改为click(() =>，否则JS代码无法执行。

3. 排查PHP代码问题 #

• 确认$con已正确初始化数据库连接，未连接会导致SQL执行失败
• 检查$Userid和$topicid是否已定义并赋值，未定义会引发SQL语法错误
• 替换存在注入风险的拼接SQL，改用预处理语句：

<?php
// 确保$con、$Userid、$topicid已正确定义
$message = $_POST['Content']; 
$status = 1; 

$stmt = $con->prepare("INSERT INTO answer(userid, answer, topicid, active) VALUES (?, ?, ?, ?)");
$stmt->bind_param("sssi", $Userid, $message, $topicid, $status);
$stmt->execute();

if($stmt->affected_rows > 0){
    echo "<div class='alert alert-dismissible fade show alert-info' role='alert'>回答提交成功！</div>";
}else{
    echo "<div class='alert alert-dismissible fade show alert-danger' role='alert'>提交失败，请重试！</div>";
}
$stmt->close();
?>

4. 添加Ajax调试机制 #

在Ajax配置中加入error回调，捕获请求异常并输出：

$.ajax({
  type: "post", 
  url: "data/answer.php", 
  data: {'Content': message},
  beforeSend:function(){
       $(".loader").show();
  },
  success: function(data){
    $("#msg").html(data);
    $(".loader").hide();
  },
  error: function(xhr, status, error){
    console.log(xhr.responseText); // 在控制台查看错误详情
    $("#msg").html("请求出错：" + error);
    $(".loader").hide();
  }
});

同时打开浏览器开发者工具（F12）的Network面板，查看请求状态和返回内容，定位空白和“2022”字样的来源。

内容的提问来源于stack exchange，提问作者Yahaya Ibrahim Yacksweb