Question

我想知道在Ajax调用之后更新DOM的最佳做法是什么。

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

我认为有两种可能性：

进行Ajax调用，在db中添加用户并返回带有html标记的所有DOM结构等。
创建一个在db中添加用户并返回用户的所有数据并在Javascript中创建DOM元素的Ajax

这是最好的方式（或其他方式）？

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创建Element结构（您可以与页面上的其他结构保持一致）。并将其包装在一个函数中。

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); 
  }

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

2 个答案: