zoukankan      html  css  js  c++  java
  • 使用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>
  • 相关阅读:
    java作业5
    《大道至简》第五章读后感
    java作业4
    《大道至简》第四章读后感
    java作业3
    《大道至简》第三章读后感
    java作业2
    Java课程作业1
    《大道至简》第二章读后感
    《大道至简》第一章读后感
  • 原文地址:https://www.cnblogs.com/mmit/p/12624005.html
Copyright © 2011-2022 走看看