2017精华版：jquery 中 ajax，后台获取数据库json数据，显示在html页面 02

2.页面 显示 ajax返回 的json数据

页面代码：

mian.html

<link rel="stylesheet" type="text/css" href="css/bg.css"/>
<script type="text/javascript" src="main.js"></script>

<div class="maincontent row ">
    <ul class="breadcrumb">
        <li>首页</li>
        <li class="active">主界面</li>
    </ul>

    <div id="myDiv">
        <button type="button" οnclick="loadAllData()">获取学生信息</button>

        <ul id="list"> </ul>

    </div>
     
</div>

对应 main .js代码

function loadAllData() {
    $.get("api/getstudentdata", function (res) {
        // console.log(res);
        // console.log(data[0].name);
       /*    $("#list").html('');*/
        var json=res;//返回的ajax -[]
        $.each(json, function (index, item) {
            //循环获取数据
            var name = json[index].name;
            var tel = json[index].tel;
            var id = json[index].id;

            $("#list").html($("#list").html() + "<br>" + id + " - " + name + " - " + tel + "<br/>");

        });

    })
}

注意 ：

 $.get("api/getstudentdata",

必须与 路由中的ajax 参数保持一致

router.get("/api/getstudentdata",authmanage.authRouteAPI,function(req,res) {