使用 AJAX 或 jQuery 更新 HTML table

Question

根据我阅读的内容 here on AJAX, it is for updating a page without having to refresh it. I have read further，请注意（至少）它的 JavaScript 部分让您将数据发送到另一个页面。

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

我正在尝试做什么

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

Answer 1

如果您只有简单的按钮，它会从 table 中删除一行，例如：

<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."
    } //...
  });
});

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

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

我推荐：

不要向服务器发送 HTML，只发送一些 json 数据，服务器也一样 - 不要用 HTML 响应或几乎不转义符号，只用响应字符串 'done' 或 json {"removed": "someID"}。 HTML 不同语言的解析器不同，你需要对 HTML 进行转义，如果你发送 json 内部包含 HTML 的数据，你将遇到 JSON 解析器的问题.因此，只需向 JSON 发送您请求的具体信息即可？您要 read/create/update/delete?
如果您 create/update/delete 数据库/服务器中的某些项目具有 ID，每次 return 从服务器返回到客户端的 ID。大多数情况下，最好准确处理您删除的项目。
了解 CRUD 操作。

使用 AJAX 或 jQuery 更新 HTML table

Using AJAX or jQuery to update an HTML table

html

javascript

ajax

jquery