Javascript 使用AJAX或jQuery更新HTML表

从我在AJAX上读到的内容来看，它是用来更新页面而不必刷新页面的。我读过，注意到（至少）它的JavaScript部分让您将数据发送到另一个页面

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

我想做的事

---

我正在尝试使用按钮，允许用户在表中添加和删除。我已经知道，我很可能会使用AJAX来加载表内容（因为我不只是尝试加载，而且下拉菜单将确定要显示的表）。我的问题是，当用户单击按钮来插入/删除表行时，我应该将jQuery句柄放在适当的位置，还是应该通过AJAX将表发送到一个文档以进行操作并返回？（我正在尝试在我的页面上获得良好的无重新加载功能。）

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

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

// 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，其中包含您请求的确切目的是什么？您试图读取/创建/更新/删除哪个元素
• 如果从DB/Server中创建/更新/删除某个项，并且该项具有ID，则每次都将ID从服务器返回到客户端。大多数情况下，最好准确地处理删除的项目
• 了解操作

---

删除相当简单。在服务器上确认后，只需从页面中删除一行即可。一般来说，插入一行并不困难，可以在不替换整个表的情况下保持页面/元素的位置。大多数表插件也有传递新行数据的方法来为您创建和插入html。这是通过AJAX还是jQuery完成的，我是否必须发送整个html对象？我是否必须发送任何内容？“将服务器配置为只返回数据，而不是html。”这是通过上面的代码完成的吗？不，仅在向客户端发送响应时，不要发送包含这些符号>、<和quetoe的长字符串。很难逃脱，你会节省一些时间。

很难逃脱。

。。毫无意义。如果以html格式发送，则不需要转义。如果发送包含在JSON中的html，JSON编码器将很好地进行转义，而在客户端无需执行任何操作对不起，我的英语很混乱，我的意思是，有时候JSON或任何其他解析器中的html可能会有问题，因为html使用

'

和

”

作为属性：

class=“foo“

。如果您想在其他地方解码数据之前修改数据，则可能会产生冲突。例如：--最好只发送数据，而不是HTML。由于某种原因，当我尝试使用它向页面发送数据时（通过将.ajax（）的url设置为页面的路径名），页面不会接收数据。