使用jQuery渲染一般數據


<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/css/bootstrap-main.css">
    <script src="./lib/js/jquery.min.js"></script>
    <title>使用一般渲染</title>
</head>

<body>
    <div class="col-sm-11" id="middle">

    </div>
 
    <script>
        $.ajax({
    type: 'get',
    url: "https://www.xxxxxxxxxxxxxxxxxx",
    dataType: 'JSON',
    success: res => {
        console.log(res);
         var article = res.Data[0].article;
        console.log(article);
         var artHtml = '';
            artHtml += "<h3 class=\"title\">",
                artHtml += article.title,
                artHtml += "</h3>",
                artHtml += "<h5 class=\"editor\">作者:"
            artHtml += article.nickName,
                artHtml += "&nbsp;發布於:",
                artHtml += article.publishTime,
                artHtml += "<span class=\"time\"></span> &nbsp;閱讀數:",
                artHtml += article.viewCount,
                artHtml += "<span class=\"read-number\"></span></h5>",
                artHtml += "<div class=\"detail\"><p>"
            artHtml += article.content,
                artHtml += "</p></div><span>喜歡:"
            artHtml += article.likeCount,
                artHtml += "</span>"
         $('#middle').html(artHtml);
     },
    error: msg => {
        console.log(msg);
    }
})
    </script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM