Question

我遇到通过jax POST传递变量的问题。当我删除第4行数据（old）时，一切都很完美。我试图在编辑之前传递正在编辑的<td>的值。内容是编辑后的值，因此在选择表<td>之后但在它成为可编辑内容之前，我会获取单元格的值。

这是我尝试使用变量＆＃39; old＆＃39;。

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

            var old=$(this).text();

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

        });

        $('td').on('input',function() {
            console.log('event');    
            $.ajax({
                method: "POST",
                url: "updatedatabase.php",
                data: { 
                    content: $(this).text(), 
                    date: $(this).siblings().first().text(),
                    prod: $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').text(),
                    old
                }
            })
                .done(function( msg ) {
                alert( "Data Saved: " + msg );
            });

        });

Answer 1

您可以将三种类型传递给数据类型：PlainObject或String或Array （如 jQuery.ajax() 文档中所述）并且因为您传递了一个对象你不能只在对象中放置变量old，你应该传递名称和值name: value,name: value,...，所以它应该像old: old：

var old=""; //--->Define variable

$('td').click(function(){
    old=$(this).text(); //--->Set variable
    $(this).prop('contenteditable', true);
});

$('td').on('input',function() {
    ...

    data: { 
        content: $(this).text(), 
        date: $(this).siblings().first().text(),
        prod: $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').text(),
        old: old //--->Get variable
    }

    ...
});

查看 Working with objects 文档。

注意：您必须声明变量old globaly，以便在click和input两个事件中定义。

希望这有帮助。

var old="";
var show_notification = false;

$('td').click(function(){
  show_notification = true;
  old=$(this).text();

  $(this).prop('contenteditable', true);
});

$('td').on('input',function() {
  if(show_notification===true){
    toastr.info(old,'Old text',{"timeOut": 2000});
    show_notification = false;
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>

<table border=1>
  <tr>
    <td>first td</td>
  </tr>
  <tr>
    <td>second</td>
  </tr>
  <tr>
    <td>third</td>
  </tr>
</table>

Answer 2

你的变量＆＃34; old＆＃34;在td单击处理程序中作用域。它对其他功能不可见，因为它不存在于该点击处理程序之外。最简单 - 但非常不合时宜 - 的解决方案是在全局范围内声明var old（即只是说var old;在脚本的顶部）并且只在click处理程序中分配它。然后，您可以使用闭包来屏蔽变量。我将在下面举一个例子。其他可能的解决方案包括将旧的分配给TD内的属性或使用localStorage / sessionStorage。

(function(){
      var old;
      $('td').click(function(){
        old=$(this).text();
        $(this).prop('contenteditable', true);
      });  

      $('td').on('input',function() {
         console.log('event');    
         $.ajax({
            method: "POST",
            url: "updatedatabase.php",
            data: { 
              content: $(this).text(), 
              date: $(this).siblings().first().text(),
              prod: $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').text(),
              old: old
            }
         })
         .done(function( msg ) {
             alert( "Data Saved: " + msg );
         });
       });
    })();

ajax POST麻烦传递变量

2 个答案: