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);
    // 创建backResult空对象
    $arr = [];
    // 执行while循环语句,循环数据库查询的结果集,并使用fetch_array()取出每条记录
    while ($row = mysqli_fetch_array($res)){
        $arr[] = $row['id'];
        $arr[] = $row['article_name'];
    }
    // 打印返回给前台的json数据
    echo json_encode($arr);
?>

AJAX实现回显：

$(document).ready(function(){
        $.ajax({
                url : "./php/active.php",//后台请求的数据，用的是PHP
                type : "post",//请求方式
                async : false,//是否异步请求
                success : function(msg) { //如果请求成功，返回数据。
                        var res = JSON.parse(msg);
                        console.log(res);
                        $("#article_name").append(res.article_name);
                        $("#id").append("[ID:" + res.id + "]");
                        console.log(res.article_name);
                        console.log(res.id);
                },
        })
})

active.php:

["1","4124214"]

**

html console:

▼(2) ["1", "4124214"]

0: "1"

1: "4124214"

length: 2

▶__proto__: Array(0)

undefined

undefined

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

Answer 1

echo $row['article_name']."<br>";
        echo $row['id'];

他们出来貌似不是你想要的值哦，不是数组也不是json