内联CKEditor使用AJAX / PHP保存到MySQL

Question

我有一些标题框，希望它们可以进行内联编辑并将其保存到数据库中以更新表中的某些记录。

出于某种原因，当我单击“保存”按钮时，什么也没有发生。

目前，它仅使用jQuery，是否需要为此使用AJAX？

如果是这样的话，那么任何提示都可以使我朝正确的方向发展，因为我对AJAX不太熟悉。

这是我的代码：

的index.php

          <div class="caption" id="caption1" contenteditable="true" style="min-height: 450px;">    
           <?php
            $query3 = "SELECT * From (select * from ckeditor ORDER BY id DESC LIMIT 2) AS name ORDER BY id LIMIT 1";
            $show = mysql_query($query3, $con);
            while ($row = mysql_fetch_array($show))
            {
              echo $row['file'];
            }
            ?>
        </div>
        <button type="button" id="save"><span>Save</span></button>
            <script>
               $(document).ready(function (e) {

                  $("#save").click(function (e) {
                      var data = CKEDITOR.instances.caption1.getData();
                      var options = {  
                           url: "save.php",
                          type: "post",
                          data: { "editor" : encodeUriComponent(data) },
                         success: function (e) {
                           echo "Succesfully updated!";
                         }
                       };
                  }
               });
            </script>
      </div>

save.php

     <?php
$connection = mysql_connect("localhost", "", ""); 
$db = mysql_select_db("castle", $connection); 
//Fetching Values from URL
$data = nl2br($_POST['caption1']);
//Insert query
$query ="INSERT INTO `ckeditor`(`file`) VALUES ('$data')";
echo "Form Submitted Succesfully";
mysql_close($connection);
?>

Answer 1

您需要像这样将数据发送到服务器。

$.ajax({
   url: "save.php",
   data: {
      "editor" : encodeUriComponent(data)
   },
   error: function() {
      //Error
   },
   success: function(data) {
      //Success
   },
   type: 'POST'
});

当前，您只是在创建一个名为“选项”的对象

您的代码应如下所示；

$("#save").click(function (e) {
  var data = CKEDITOR.instances.caption1.getData();
  $.ajax({
   url: "save.php",
   data: {
       "editor" : encodeUriComponent(data)
   },
   error: function() {
      //Error
   },
   success: function(data) {
      alert('Success');
   },
   type: 'POST'
});

}

只是附带说明，“ echo”在js中不起作用。 您需要使用“ alert（）”或“ console.log（）”