Javascript 使用AJAX/PHP将内联编辑器保存到MySQL

我有几个标题框，我希望能够内联编辑它们，并将它们保存到数据库中，以更新表中的某个记录

由于某些原因，当我单击“保存”按钮时，什么也没有发生。。甚至在控制台中也没有

目前只是在使用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>

拯救
$（文档）.ready（函数（e）{
$（“#保存”）。单击（函数（e）{
var data=CKEDITOR.instances.caption1.getData（）；
变量选项={
url:“save.php”，
类型：“post”，
数据：{“编辑器”：编码器组件（数据）}，
成功：职能（e）{
echo“成功更新！”；
}
};
}
});

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);
?>

---

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

$.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'
});

目前您正在创建一个名为“选项”的对象

你的代码应该是这样的

$.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中不起作用。如果要发送ajax，您需要使用“alert（）”或“console.log（）”
嗨，Pavel，谢谢您花时间回复。我不熟悉Ajax，所以我很难让它正常工作。。你知道为什么我现有的代码不起作用吗？我已经为此挠头了大约一天。你在js中创建了选项，但你忘了通过ajax发送。请添加$.ajax（选项）；Pavel我已经实现了下面的代码，但是当按下按钮时仍然没有得到任何操作。嗨，Ted-这是非常有趣的，但是我已经实现了代码，当我按下按钮时仍然没有得到任何操作。我现在修复了这个问题。