Ajax 调用后更新 DOM 的最佳实践

Question

我想知道在 Ajax 调用后更新 DOM 的最佳实践是什么。

例如，假设我们有一个用户列表，我们可以使用一个表单添加一个用户，该表单进行 Ajax 调用以插入用户。 提交表单并将用户添加到数据库后，编辑 DOM 以添加 HTML 而不刷新页面（使用 Ajax 成功事件）。

我看到了两种可能性：

1. 进行 Ajax 调用，将用户添加到 db 并返回所有带有 html 标签的 DOM 结构等。

2. 制作一个 Ajax，在 db 中添加用户并返回用户的所有数据并在 Javascript 中创建 DOM 元素

什么是最好的方法（或其他方法）？

Answer 1

您可以使用document.createElement()向 DOM 添加元素。 然后使用innerHTML属性向元素添加内容。 最后使用.appendChild()将元素附加到另一个元素。

这两个选项之间没有更好的方法。 您可以在后端准备您的 HTML 结构并导入编写的 HTML 并直接使用 JavaScript 附加它，或者在 JavaScript 中创建元素前端。

以下是使用后者的主要优点：

• 调试 JavaScript 比 PHP 更容易（以 AJAX 调用为目标的 PHP 文件很难调试和维护）。

• 使用 AJAX 而不是 HTML 字符串返回对象更易于使用且更易于维护。 您可以使用 API 来处理数据。 PHP 只返回一个 JSON 对象。

• 如果 JavaScript 处理元素的创建，您可以将它们保存在变量中。 有时，我发现将HTMLElement保存在 JavaScript 变量中很有用，这样我以后就可以访问它以更改其属性，而无需通过选择器（ querySelector()和其他）。

Answer 2

我会选择第二个选项

• 制作一个 Ajax，在 db 中添加用户并返回用户的所有数据并在 Javascript 中创建 DOM 元素

像这样分解它以提高可读性和维护性

• 向 AJAX 添加操作，该操作链接到后端的函数（即 PHP、Python），该函数执行数据库更新等。

• 在 Javascript 中创建元素结构（您可以与页面上的其他结构保持统一）。 并将其包装在一个函数中。

   document.body.onload = addElement; function addElement ($newuser) { // create a new div element that would contain user record var newDiv = document.createElement("div"); // and give it some content var newContent = document.createTextNode($newuser); // add the text node to the newly created div newDiv.appendChild(newContent); // add the newly created element and its content into the DOM var currentDiv = document.getElementById("user-container"); document.body.insertBefore(newDiv, currentDiv); }