Question

我有一个Ajax函数，用于获取所有用户信息，然后将其传递给displayUser函数。在displayUser函数中，我将其打印在ID = displayUsers的表中。这工作正常。但我现在想要添加更多的HTML代码，而不需要脏代码。有没有人有这方面的良好做法？

   <script>
    $(function () {
       $.ajax({
          type: 'GET',
          url: '?page=getUserInfo',
          dataType: 'json',
          success: function(data) { 

              $.each(data, function(i, item){
                  displayUsers(item);
            });
          }
       });
    });
    </script>

    <script>
       function displayUsers(item) {
           var $displayUsers = $('#displayUsers');
            $displayUsers.append('<tr><th>navn:</th><td>' + item.name + '</td><th>Brukernav:</th><td>' + item.username + '</td></tr>'); 

        }
    </script>

Answer 1

我有两个想法。 1你做得很好，2我能做什么（在讨论中也带来了es2015）。

我看到你正在创建一个元素，然后附加它。这确实是一种很好的做法，并且性能更高，因为可以减少文档重绘。您可以使用document.createElement等更多内容扩展此想法。您可以创建3个元素，然后将它们逐个附加到父元素。虽然你最初可能会用不好看的代码标记它，但它的效果很好并且是一个很好的代码。

您还可以查看支持多行模板的es2015模板。浏览器对它有很好的支持但是我不确定你是否想要引入es2015。

在AJAX / HTML中显示成功的最佳实践

1 个答案: