PHP CKeditor 使用 ajax 将 $_POST 上的空数据发送到数据库答案

【问题标题】：PHP CKeditor sends empty data on $_POST to the database by using ajaxPHP CKeditor 使用 ajax 将 $_POST 上的空数据发送到数据库
【发布时间】：2019-04-09 16:41:53
【问题描述】：

CKEditor 已正确加载。但是当我想将数据插入数据库时，它会发送空数据。这是我用来发送数据的form。

<form action="ajax/EditDeleteLecture.php" method="post" enctype="multipart/form-data" id="form1">
    <div class="row">
    <div class="col-md-12">
    <div class="form-group">
    <label>Choose file: </label>
    <input type="file" name="files" id="files" placeholder="First Name" class="form-control" style="border:1px solid #464C6B">
    </div>
    </div>
    <div class="col-md-12">
    <div class="form-group">
    <label for="Date" class="control-label">Description</label>
    <textarea id="editor1" name="editor1"  class="form-control" tabindex="2" rows="10" cols="80">
    </textarea>
    </div>
    </div>
    </div>
    <div class="row">
    <span id='message'></span>
    <div class="col-md-12">                                         
    <span id="success_message" class="text-success"></span>
    <button type="button" class="btn btn-primary pull-right" data-dismiss="modal" onclick='addRecord()'>Upload</button>
    </div>    
    </div>
</form>

这个function AddRecord() 会将数据发送到EditDeleteNewsAndEvents.php 页面以供插入。

function addRecord(){
     var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form
            $.ajax({
                url: "ajax/EditDeleteNewsAndEvents.php",
                type: "post",
                data: formData,
                 async: false,
                 cache: false,
                 contentType: false,
                 processData: false,
             success: function(output) {
                alertify.set('notifier','delay', 3);
                alertify.set('notifier','position', 'top-right');
                alertify.success('Data Inserted Successfully');            
                 readRecords();
                 $('#form1').trigger("reset");
                }

    });
}

我在EditDeleteNewsAndEvents.php 页面中编写的这段代码用于将数据插入数据库。但是当我收到这个$desc = $_POST['editor1']; 这个变量时，它在Network Pane 中显示为空。

//adding records in database
if(isset($_FILES['files']['name']))
{
    $files = $_FILES['files']['name']; 
    $desc = $_POST['editor1'];
    $path='News_And_Events_Images/'.$files;
    move_uploaded_file($_FILES["files"]["tmp_name"], $path);
    $date =  date('d-M-y');

          echo $query = "INSERT INTO news_events(body,posted_by,posted_date,pic) VALUES ('$desc','$single_user','$date','$path')"; exit;

         $cm=sqlsrv_query($conn,$query);
}

这在Network Pane中显示。

INSERT INTO news_events(body,posted_by,posted_date,pic) VALUES ('                                            ','0302254855','06-Nov-18','News_And_Events_Images/0bd5583c05354dbceb79c833c27f6c68.jpg')

【问题讨论】：

顺便说一句，async: false 已弃用，不应使用。大多数浏览器现在都会发出警告。它可以通过在 ajax 请求运行时锁定浏览器 UI 来创建糟糕的用户体验 - 如果花费的时间比预期的要长，用户可能会认为浏览器已经崩溃。您应该没有实际需要，无论如何，您的代码已正确编写以处理异步请求。
第二点：您的代码容易受到 SQL 注入攻击。您应该使用参数化查询和准备好的语句来帮助防止攻击者通过使用恶意输入值来破坏您的数据库。 bobby-tables.com 解释了风险。有关如何使用参数安全地编写查询的示例，请参阅 here。切勿将未经处理的数据直接插入您的 SQL 中。按照您现在编写代码的方式，有人可以轻松窃取、错误更改甚至删除您的数据。
关于您的问题，能否请您向我们展示您设置 CKEditor 的代码。您声称它“设置正确”，但您的问题表明它可能不是。

标签： php html ajax forms ckeditor

【解决方案1】：

我认为您的function addRecord() 中应该有一个用于CKEDITOR 的特定变量：

 var ckInfo = CKEDITOR.instances['editor1'].getData();

在我的情况下，它工作正常，但是你应该稍微改变一下你的 data 变量。

【讨论】：

那么如何将其发送到 EditDeleteNewsAndEvents.php 页面？？
在您的情况下，也许您可以从表单中获取除 textarea 之外的所有数据。然后，您的 data 变量 Ajax 将如下所示：data: {formData, ckInfo} 查看文档 here，它可能很有用。

【解决方案2】：

当您使用传统形式向服务器发送数据时，textarea 就是updated with editor content automatically。这是因为数据是从textarea 中获取的，而不是从不是textarea 之类的表单元素的编辑器中获取的。

如果您使用 AJAX 发送请求，您应该更新textarea manually，然后从中获取数据，或者您应该使用get data from the editor directly。

【讨论】：