Ajax+php想要实现回显，能查询到信息，但是未显示在html前端，该怎么修改？

Question

HTML代码：

<span id="article_name" style="font-weight: 700;">&nbsp;&nbsp;</span>
<span id="id" style="color: rgb(24, 144, 255); padding-left: 10px;"></span>

连接数据库php代码：

<?PHP
    header("Content-Type: text/html; charset=utf-8");

    include('conn.php');//链接数据库

    $sql = "select * from article";
    $res = mysqli_query($conn,$sql);

    while ($row = mysqli_fetch_array($res)) {
        echo $row['article_name']."<br>";
        echo $row['id'];
    }
?>

AJAX实现回显：

$(document).ready(function(){
    $.ajax({
        url : "./php/active.php",//后台请求的数据，用的是PHP
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        success : function(msg) { //如果请求成功，返回数据。
            var str = "";
            var str2 = "";
            $.each(msg,function(i,n)){ //$.each()是对数组，json的遍历。
                str+ = n.article_name;
                str2+ = "[ID:" + n.id + "]";
            }
            $("#article_name").append(str);
            $("#id").append(str2);
        },
    })
})

打开active.php可以查看到从数据库获取到的名称以及ID，但是前端html页面没有回显，该怎么修改能显示出来？

Answer 1

 while ($row = mysqli_fetch_array($res)) {
        echo $row['article_name']."<br>";
        echo $row['id'];
    }

这东西返回的也不是json吧。先看看你返回的字符串吧。

success : function(msg) {
    console.log(msg)
}