Question

我目前通过附加HTML填充列表框（以及其他内容）。我通过AJAX加载从JSON获取PHP数据，这使我在页面上更灵活地重新加载东西并减少不必要的页面加载。

function tracker_list(){
    //get a reference to the select element
    $list = $('#tracker_list');
    //remove entries
    $('#tracker_list').empty();
    //request the JSON data and parse into the select element
    $.ajax({
      url: 'data/JSON_dashboard.php',
      dataType:'JSON',
      success:function(data){ 
        //iterate over the data and append a select option
        $.each(data, function(key, val){
          $list.append('<li class="list-group-item"><div style="background: url(\''+val.profile_photo_path+'\');margin-right:10px;margin-left:7px" class="image-circle-30 pull-left"></div><span class="text-muted"><span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="'+val.last_activity+'"></span></span><strong><a href="#">'+val.first_name+' '+val.last_name+'</a></strong> was on the <strong><a href="#">'+val.last_page+'</a></strong><br /><span class="text-muted small">'+val.since+'</span></li>'); 
          var total = val.total;
        $("#tracker_num").html("<strong>"+total+"</strong>");   // Replace total users number in head  
        })


      },
      error:function(){
      }
    });
    };

如果我要继续这样做，有没有更好的方法？一旦我在所有HTML上使用了一个新行，脚本就会中断并且代码将开始变得非常难以理解。

Answer 1

对于更干净，性能更好的方式。

每个元素的HTML操作都很昂贵。创建一个数组，推入它，最后加入所有项目。总计数可以在每次迭代之外。

function tracker_list() {
    //get a reference to the select element
    $list = $('#tracker_list');
    //request the JSON data and parse into the select element
    $.ajax({
        url: 'data/JSON_dashboard.php',
        dataType: 'JSON',
        success: function(data) {
            //remove entries
            $list.empty();

            var strArr = [];
            //iterate over the data and append a select option
            $.each(data, function(key, val) {
                strArr.push('<li class="list-group-item"><div style="background: url(\'' + val.profile_photo_path + '\');margin-right:10px;margin-left:7px" class="image-circle-30 pull-left"></div><span class="text-muted"><span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="' + val.last_activity + '"></span></span><strong><a href="#">' + val.first_name + ' ' + val.last_name + '</a></strong> was on the <strong><a href="#">' + val.last_page + '</a></strong><br /><span class="text-muted small">' + val.since + '</span></li>');
                .append();
            })

            $list.append(strArr.join(""));

            $("#tracker_num").html("<strong>" + data[data.length - 1].total + "</strong>"); // Replace total users number in head  

        },
        error: function() {}
    });
};

Answer 2

要添加换行符，您可以在另一个var中构建HTML并将其添加到HTML：

var html = '<li class="list-group-item"><div style="background';
html = html + 'url(\''+val.profile_photo_path+'\');margin-right';
html = html + '10px;margin-left:7px" class="image-circle-30 pull-left">';
// and so on...
$list.append(html)

或者你可以用这样的jQuery构建HTML（只有第一部分）：

var html = $('<li />')
    .addClass('list-group-item')
    .append($('<div />')
        .css({
            background  : 'url('+val.profile_photo_path+')',
            marginRight : 10,
            marginLeft  : 7
        })
        .addClass('image-circle-30 pull-left')
    )
    .append($('<span />')
        .addClass('text-muted')
        .append($('<span />')
            .addClass('glyphicon glyphicon-time timestamp pull-right')
            .data({
                toggle  : 'tooltip',
                placement   : 'bottom'
            })
            .prop({
                title   : val.last_activity
            })
     );
  // and so on ...
  $list.append(html)

但我建议您使用JSRender或Mustache等诱惑引擎。

Answer 3

是否有更简洁的方法来解析我的HTML数据？

是的，这种更干净的方式称为HTML模板，例如Handlebars.js。首先，将所需的HTML部分编写到特殊的脚本标记中，并为要显示的各个值添加占位符。

Total: <strong id="tracker_num"></strong>

<script type="text/x-handlebars-template" id="trackerlist-template">
  {{#each .}}
  <li class="list-group-item">
    <div class="profile-image" class="image-circle-30 pull-left" style="background-image: url('{{ profile_photo_path }}'); margin-right:10px; margin-left:7px;"></div>
    <span class="text-muted">
      <span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="{{last_activity}}"></span>
    </span>
    <strong><a href="#">{{first_name}} {{last_name}}</a></strong> was on the
    <strong><a href="#">{{last_page}}</a></strong><br />
    <span class="text-muted small">{{since}}</span>
  </li>
  {{/each}}
</script>

然后，您可以在JavaScript代码中使用该模板，而不必为HTML创建烦恼，因为代码和演示文稿是完全分开的。

var trackerlistTemplate = Handlebars.compile( $("#trackerlist-template").html() );

function getTrackerList() {
    return $.get('data/JSON_dashboard.php').fail(function () {
        console.err("could not retrieve tracker list");
    });
}

function renderTrackerList(data) {
    $('#tracker_list').html( trackerlistTemplate(data) );
    $("#tracker_num").text(data.length);
}

$("#refreshButton").click(function () {
    getTrackerList().done(renderTrackerList);
});

注释

您不需要使用$.ajax()来获得这样一个简单的GET请求。 $.get()缩短了很多，并且可以正常工作。
将获取数据的函数与使用数据的函数分开可能很有用。这可以通过jQuery轻松实现，因为您可以从数据获取函数返回XHR对象并在其他地方使用它，如上所示。

有没有更简洁的方法来解析我的HTML数据？

3 个答案: