使用 AJAX 或 jQuery 更新 HTML 表格

Question

根据我在 AJAX 上阅读的 here，它用于更新页面而无需刷新它。我已阅读further，并注意到（至少）其中的 JavaScript 部分让您将数据发送到另一个页面。

根据我对 jQuery 的了解和经验，它基本上是一个强大的 JavaScript 库。

我要做什么

我正在尝试使用允许用户在表格中添加和删除的按钮。我已经知道我很可能会使用 AJAX 来加载表格内容（因为这不仅仅是我试图加载的内容，而且下拉菜单将确定要显示的表格）。我的问题是，当用户单击按钮自己插入/删除表行时，我应该让 jQuery 就地处理，还是应该通过 AJAX 将表发送到文档以进行操作并发回？ （我正在尝试在我的页面上获得那个不错的不重新加载功能。）

Answer 1

如果你只有一个简单的按钮，它会从表格中删除一行，例如：

<tr id="table_row_id">
  <td>some info</td>
  <td><button class="remove-row">Remove</button></td>
</tr>

是的，您需要 jQuery 侦听器来处理该按钮上的单击事件。例如：

// This could easily be a call to .click()
$('.remove-row').on('click', function() {
  var idToRemove = $(this).parent().attr('id');
  $.ajax({
    method: "POST",
    data: {
      'action': 'remove',
      'id': idToRemove
    },
    success: function(response) {
      // here you can check if the element is removed from the server
      // based on the response that the server returns.
      // And if it is, you can remove it from the dom.
      $('#' + idToRemove).remove();
    },
    error: function(error) {
      // Here you can show an user message, "Sorry cannot remove element."
    } //...
  });
});

您需要意识到的是，这是异步编程，您只需定义回调。当服务器完成工作并收到响应后，就会调用回调。

因此您可以根据用户交互或时间间隔重新加载表格。

我推荐：

• 不发送 HTML 到服务器，只发送一些 json 数据，服务器也一样 - 不响应 HTML 或几乎不转义符号，只响应字符串 'done' 或 json {"removed": "someID “}。不同语言的 HTML 解析器是不同的，你需要对 HTML 进行转义，如果你发送带有 HTML 的 json 数据，你会遇到 JSON 解析器的问题。因此，只需发送带有您请求的确切信息的 JSON 就可以了？您尝试读取/创建/更新/删除哪个元素？
• 如果您从数据库/服务器中创建/更新/删除某些具有 ID 的项目，则每次将 ID 从服务器返回给客户端。大多数情况下，最好准确处理要删除的项目。
• 了解CRUD 操作。