javascript - 通过ajax发出传值

Question

我的网站上有一个 HTML 表格，我可以在其中单击一个单元格然后进行编辑。我现在正尝试使用 ajax 将编辑后的值推回我的数据库。我已经测试了点击是否正常工作，内容可编辑是否正常工作，并且 ajax 通过在 updatedatabase.php 上使用简单的“hello”发送到正确的 URL，并看到它通过警报返回。当我尝试将数据从 ajax 提取到 updateddatabase.php 时，我遇到了问题。我相信也许 $(this).val() 可能不是我想要获取我刚刚用 contenteditable 编辑的单元格的内容？我这样说的原因是因为它看起来像一个空白值被传递到第二页。这是我在主页上用于点击/内容可编辑/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() 有关，但我不确定应该将其更改为什么？感谢您的帮助!!

Answer 1

部分问题在于您实际上并未捕获要编辑的表格单元格的值。在我的示例代码中使用新版本的 jQuery 我已经替换了你的 bind()与 keyup()因为不需要任何委托(delegate):

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

   });
 });

https://jsfiddle.net/w9e0d5wm/

正如@adeneo 在评论中提到的，表格单元格没有值属性，您可以使用 val() 获得该属性.在我的示例中，我使用了 $(this).html()获取已更改的 <td> 中的文本, 但您也可以使用 .text() .

你应该改变data: { content: $(this).val() }至 data: { content: $(this).html() }或 data: { content: $(this).text() }为了在您的 AJAX 中发送变量值。现在，如果您查看控制台，您会看到发布的内容和返回的内容。