本小节基本要求

了解html文件

要点：

JSON格式的数据
Javascript(简称js)语言
样式选择器之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页面引入该文件：如下：

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

代码如下：

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

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

JS部分：

body部分：

我都用了哪些新知识：

ajax：

一种用于请求网址的技术

Javascript(简称JS)：

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

css选择器之id选择器：

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

点击展开全文

知乐空间

ajax发送json请求