Javascript 通过ajax传递值的问题

我在我的网站上有一个HTML表格，在那里我点击一个单元格，然后可以编辑它。我现在正试图使用ajax将编辑后的值推回到数据库中。我已经测试了单击是否正常工作，内容是否可编辑以正常工作，以及ajax是否通过在updatedatabase.php上使用简单的“hello”发送到正确的URL，并看到它通过警报返回。当我试图将数据从ajax拉到updateddatabase.php时，我遇到了问题。我相信可能$（this）.val（）不是我想要的，我刚刚用contenteditable编辑的单元格的内容？我之所以这样说，是因为它看起来像是一个空白值正在传递到第二页。以下是我在主页上单击/content-editable/ajax的代码块：

    $('td').click(function(){

        var val=($(this).siblings().first().text());

        var col = $(this).parent().children().index($(this));

        $(this).prop('contenteditable', true);

        //var row = $(this).parent().parent().children().index($(this).parent());

        //alert('Date: ' + val + ', Column: ' + col);

        $(this).bind('input propertychange', function() {

            //On key stroke

            $.ajax({
              method: "POST",
              url: "updatedatabase.php",
              data: { content: $(this).val() }
            })
              .done(function( msg ) {
                alert( "Data Saved: " + msg );
            });

         });
    });

下面是我在updatedatabase.php上看到的内容。我现在只是简单地测试传递的值

<?php
    if(array_key_exists("content", $_POST)) {

        echo $_POST['content'];
    }

?>

---

希望这是一个简单的解决方案，因为我相信这一切都可能只与$（this）.val（）有关，但我不确定应该将其更改为什么？谢谢你的帮助

尝试使用“委托”而不是“绑定”

问题的一部分在于您没有实际捕获要编辑的表格单元格的值。在示例代码中使用新版本的jQuery，我将您的

bind（）

替换为

keyup（）

，因为不需要任何委托：

$('td').click(function() {
   console.log('clicked');
   $(this).prop('contenteditable', true);

   $(this).keyup(function() { // get the new value as soon as the key is released

     console.log($(this).html());

   });
 });

正如@adeneo在注释中提到的，表格单元格没有可以通过

val（）

获得的值属性。在我的示例中，我使用了

$（this）.html（）

来获取更改后的

中的文本，但您也可以使用

.text（）

---

您应该将

数据：{content:$（this.val（）}

更改为

数据：{content:$（this.html（）}

或

数据：{content:$（this.text（）}

，以便在AJAX中发送变量值。现在，如果您观看控制台，您将看到发布的内容和返回的内容。

您是否观看了浏览器开发人员工具中的AJAX请求/响应？是否报告了任何错误？您是否在web服务器上运行此操作？通常，TD元素没有值，因此

val（）

不会返回任何内容。它们也没有

输入

事件。另外，在事件处理程序中绑定事件处理程序通常不是一个好主意。@JayBlanchard我还在这里学习，我不知道如何查看请求/响应？是的，我把它上传到网络主机上了。我有code.jquery.com/jquery-1.10.2.js“>包含在顶部，我希望这对ajax也是正确的？@adeneo设置事件处理程序的更好方法是什么？我还在学习。其思想是将数据库表加载到页面上的HTML表中。可以单击单元格对其进行编辑，现在我正在尝试将新编辑的值发送回数据库。在浏览器中按F12键可打开开发人员工具。您可以在网络选项卡下查看请求/响应。jQuery的

委托

在几年前就被弃用并删除了？如果是这种情况，“bind”也被弃用，请参见此处：“弃用的3.0 |事件”是的，

on（）

应该用于所有事件。它仍在工作，但将在未来的版本中删除^，当您看到不推荐的版本时，请开始搜索新的替代版本：）取决于您使用的版本@brandon此版本非常有效！我仍然是一个新手，并且认为当按下向上键或按下向下键（就像在excel中更改单元格一样）时，keyup实际上是一个错误。更改该选项并将.val更改为.text立即解决了我的问题！！：-）非常感谢！很高兴帮助@Brandon！我刚刚意识到，显然delete键不计入keyup，因为它不会触发ajax。如果只从单元格中删除值而不替换它，$（this）.keyup（function（）{从未被触发。有什么建议吗？您必须特别捕获键的代码，方便地称为a，但在我提供的示例中按delete键可以正常工作。我相信我有您上面告诉我使用的功能？删除键和退格键不会被拾取，只是在我添加#s时，而不是删除它们。