使用ajax问题进行实时表编辑和更新答案

【问题标题】：Live table edit and update using ajax problem使用ajax问题进行实时表编辑和更新
【发布时间】：2019-03-18 07:35:44
【问题描述】：

我有一个从数据库中检索数据的表，它的每一行都有编辑按钮。

当我单击“编辑”按钮时，它使该行可编辑，并且按钮的文本从“编辑”变为“保存”。

到目前为止，我已经做到了。现在我想使用 ajax 或 post 方法将编辑后的行数据发送到我的 update.php 文件，以便我可以更新我的数据库。

下面是我的代码：

  while($row = $result->fetch_assoc()) {
  echo "<tr>
    <td>" . $row["Id"]. "</td> 
    <td>" . $row["Receiving"] . "</td> 
    <td>". $row["Date"]. "</td> 
    <td>" . $row["Department"]. "</td>  
    <td>" . $row["D_type"]. "</td> 
    <td>" . $row["Org"]. "</td> 
     <td>" . $row["Org_type"]. "</td> 
  <td>" . $row["File_No"]. "</td> 
  <td>" . $row["Subject"]. "</td> 
  <td>" . $row["File_Name"]. "</td> 
    <td>" . $row["Status"]. "</td> 
  <td> <a class='btn btn-primary' href='MarkReceived.php?id=".$row["Id"]."'>Mark Received</a> </td>
  <td> <a class='btn btn-primary' href='Delete.php?id=".$row["Id"]."'>Delete</a> </td> 
    <td> <button type='button' class = 'editbtn' id=".$row["Id"]." >Edit</button> </td> 
</tr>";
}

jquery 代码：

$('.editbtn').click(function() {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds.prop('contenteditable', true);
    } else {
        $this.html('Edit');
        tds.prop('contenteditable', false);
    }
});

【问题讨论】：

您的问题是什么？您在将数据发送到 PHP 页面时遇到问题吗？或者您想知道如何将数据发送到 PHP 页面？最后一个问题已经回答了很多次了，你google一下应该可以找到一些信息。
@Umairarshad ..你可以在编辑后点击保存，只需将数据发送到你想要的文件，使用这个关键字你可以发送点击保存的行数据,这只是一种方法
您在如何使用 ajax 上有问题吗？

标签： php jquery ajax

【解决方案1】：

正如我从您的问题中了解到的那样，您正在尝试使用 ajax 在单击保存时发送数据，所以您可以这样做

$(".save").click(function(){  
          $.ajax({
              async: true,
                url : "Your URL",
                method : "POST",
                data : {
                     Id: currentlyEditId,
                     Receiving: currentlyEditReceiving,
                     Date:currentlyEditDate // and so on

                     },  
            });

你可以像这样使用 ajax 发送数据

【讨论】：

【解决方案2】：

$('.editbtn').click(function() {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.editbtn').length === 0;
  });
  if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.prop('contenteditable', true);
  } else {
      $.ajax({
        type: 'POST',
        url: 'update.php',
        data: {//your data}
      }).success(function (data) {
         // request success, do what you want to do here
      }).error(function () {
         // request error
      });
      $this.html('Edit');
      tds.prop('contenteditable', false);
  }
});

你可以这样做。或者您可以更改按钮的 id（如果它是编辑或保存）以获得更清晰的代码，它将分隔两个不同的操作。然后就用这个ajax

【讨论】：

【解决方案3】：

$('.editbtn').click(function() {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.editbtn').length === 0;
  });
  if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.prop('contenteditable', true);
  } else {
      $this.html('Updating..');
      $this.attr('disabled', true);
      $.ajax({
        type: 'POST',
        url: 'update.php',
        data: {//your data}
      }).success(function (data) {
        $this.attr('disabled', false);
        $this.html('Edit');
            tds.prop('contenteditable', false);
         // request success, do what you want to do here
      }).error(function () {
         // request error
      });

  }

【讨论】：