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回复或者几乎不能转义符号，只需用字符串“#be; done＆＃39;或json {＆＃34;删除＆＃34;：＆＃34; someID＆＃34;}。不同语言的HTML解析器是不同的，你需要转义为HTML，如果你发送带有HTML的json数据，你将遇到JSON解析器的问题。那么只需向JSON发送信息，您要求的确切信息是什么？您尝试阅读/创建/更新/删除哪个元素？
如果您从DB / Server创建/更新/删除某项具有ID的项目，则每次都会将ID从服务器返回给客户端。大多数情况下，最好能够准确处理被删除的项目。
了解CRUD操作。

使用AJAX或jQuery更新HTML表

1 个答案: