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