[JavaScript知识库]解决Ajax数据展示追加问题

解决Ajax数据展示追加问题

问题描述：
一个Tab菜单栏，有不同的Tab标签，使用ajax传数据,首先给Tab1标签传完数据后展示，当点击Tab2标签想要展示数据时，Tab1标签的数据会出现（即Tab2标签的数据追加到Tab1数据的后面，实际上点击Tab2时Tab1数据不展示）

解决办法：

定义一个空的变量html，对html追加数据：

var html = ""
html = html + '<tr><td width="10%" align="center" class="uartilceid">' + data[i].artilceid + '</td><td width="60%" align="center"><a target="_blank" href="/article/' + data[i].artilceid + '">' + data[i].headline + '</a></td><td width="8%" align="center">' + data[i].readcount + '</td><td width="8%" align="center">' + data[i].replycount + '</td><td width="14%" align="center" class="canColl" id="' + data[i].artilceid + '"><label style="color: #337ab7">删除</label>&nbsp&nbsp<label style="color: #337ab7">编辑</label></td>'
$("#coll").html(html)

完整代码如下：

function myArticle() {
        var myart = $(".myart").text()
        var html = ""
        $.ajax({
            url: "/myar**cle",
            type: "get",
            success: function (data) {
                if (data["message"] == "not-logged-in") {
                    alert("你未登录，或者登录已失效，请重新登录后查看用户信息");
                }
                for (var i = 0, len = data.length; i < len; i++) {
                    html = html + '<tr><td width="10%" align="center" class="uartilceid">' + data[i].artilceid + '</td><td width="60%" align="center"><a target="_blank" href="/article/' + data[i].artilceid + '">' + data[i].headline + '</a></td><td width="8%" align="center">' + data[i].readcount + '</td><td width="8%" align="center">' + data[i].replycount + '</td><td width="14%" align="center" class="canColl" id="' + data[i].artilceid + '"><label style="color: #337ab7">删除</label>&nbsp&nbsp<label style="color: #337ab7">编辑</label></td>'
                }
                $("#coll").html(html)
            }
        })
    }