领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

第十四次记录，构建json数据，ajax获取json数据显示到网页

nixiaole 2024-11-15 23:03:06 知识剖析 23 ℃

本小节基本要求

  • 了解html文件

要点：

  1. JSON格式的数据
  2. Javascript(简称js)语言
  3. 样式选择器之ID选择器

目前样式：


目标：

利用Ajax动态获取文章数据，成就动态页面。


Step1：构建JSON格式数据

新建文件夹，建立一个.json后缀的文件，这个文件里存放的是我们的文章数据。


代码如下：

{
  "hot": [
    {  "id": 1,
      "title": "Zabbix"
    },
    {
      "id": 2,
      "title": "Prometheus"
    },
    {
      "id": 3,
      "title": "Java yyds!"
    },
    {
      "id": 4,
      "title": "什么？卡卡罗特对波又输了？"
    },
    {
      "id": 5,
      "title": "一千零一夜"
    },
    {
      "id": 100,
      "title": "问风"
    }
  ],
  "new": [
    {  "id": 6,
      "title": "ElasticSearch"
    },
    {
      "id": 7,
      "title": "Kafka"
    },
    {
      "id": 8,
      "title": "从你的全世界路过"
    },
    {
      "id": 9,
      "title": "如果那天可以好好聊聊"
    },
    {
      "id": 10,
      "title": "带着记忆回到14年"
    },
    {
      "id": 11,
      "title": "孤流拒海"
    }
  ]
}
  • hot:最热文章列表
  • new:最新文章列表
  • 共计12篇文章标题

什么？你问我JSON格式的数据为什么长这样？为什么带个{},为什么带个[ ]?

因为大家都这样写，所有就成这样咯。

ps：现在开发网站几乎全部都是用的json格式构建的数据。学会这种格式，难道不重要吗？

这是一个很火的学习网站：www.baidu.com

Step2：Id选择器使用


这点作了修改，给ul添加了Id选择器。

为什么添加ID选择器，看Step4

Step3：引入jquery文件:这是个工具

下载地址：https://code.jquery.com/jquery-1.11.0.min.js

直接右键屏幕另存为就可以了。

创建js文件夹，将文件放入，并且在body.html页面引入该文件：如下：


<script  src="../js/jquery-3.1.1.js"></script>


Step4: Ajax请求json文件，获取json数据

代码如下：

<script type="text/javascript">

    function getData() {
        $.ajax({
            type: "GET",
            url: "../data/article.json",
            dataType: "json",
            headers:{'Content-Type':'application/json;charset=utf8'},
            success: function (res) {

                let hot_w = res.hot;
                let new_w = res.new;

                var hot_html = ""
                var new_html = ""

                hot_w.forEach(function (d) {

                    var h = "<li>" + d.title + "</li>"

                    hot_html += h;

                })

                new_w.forEach(function (d) {

                    var n = "<li>" + d.title + "</li>"

                    new_html += n;
                })

                console.log($.parseHTML(hot_html))

                console.log($(".hot .card-body ul"))
                $("#hot-w").append($.parseHTML(hot_html))
                $("#new-w").append($.parseHTML(new_html))
            }
        })
    }

    getData()

</script>

Step5：右键运行，结果如下：




附本篇body.html中的所有追加的代码：

JS部分：

<script  src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">

    function getData() {
        $.ajax({
            type: "GET",
            url: "../data/article.json",
            dataType: "json",
            headers:{'Content-Type':'application/json;charset=utf8'},
            success: function (res) {

                let hot_w = res.hot;
                let new_w = res.new;

                var hot_html = ""
                var new_html = ""

                hot_w.forEach(function (d) {

                    var h = "<li>" + d.title + "</li>"

                    hot_html += h;

                })

                new_w.forEach(function (d) {

                    var n = "<li>" + d.title + "</li>"

                    new_html += n;
                })

                console.log($.parseHTML(hot_html))

                console.log($(".hot .card-body ul"))
                $("#hot-w").append($.parseHTML(hot_html))
                $("#new-w").append($.parseHTML(new_html))
            }
        })
    }

    getData()

</script>

body部分：

<body>

<div class="tbody">
    <main class="is-main">
        <div class="main-left">
            <div class="gonggao">
                哈喽，我是公告位
            </div>
            <div class="panel">
                <div class="guangao">哈喽，我是广告位</div>
            </div>
            <div class="content">
                <div class="card">
                    <div class="hot">
                        我是热门文章
                    </div>
                    <div class="card-body">
                            <ul id="hot-w">

                            </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="new">
                        我是最新文章
                    </div>
                    <div class="card-body">
                        <ul id="new-w">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-right">
<!--            <div class="my-info">-->
<!--                    我是个人信息框-->
<!--            </div>-->
        </div>
    </main>
</div>


</body>

我都用了哪些新知识：

  • ajax：

一种用于请求网址的技术

  • Javascript(简称JS)：

一种脚本语言，你所看到的所有网站都离不开这门技术

  • css选择器之id选择器：

样式选择器，前几篇讲过类选择器，详细了解入口，www.baidu.com

  • json格式的数据:

你所看到的所有网站的数据目前几乎都是以JSON格式交互的

Tags：

猜你喜欢

最近发表
标签列表