使用AJAX或jQuery更新HTML表

Question

从我已阅读这里的AJAX，它是用于更新页面，而无需刷新。 我已进一步阅读，并注意到（至少）它的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侦听器用于该按钮上的click事件。 例如：

// 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操作的信息。