阅读 80

ajax发送json请求(ajax请求的五个步骤)

本小节基本要求

  • 了解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页面引入该文件:如下:

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

代码如下:

Step5:右键运行,结果如下:

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

JS部分:


body部分:



哈喽,我是公告位
哈喽,我是广告位
我是热门文章
我是最新文章

我都用了哪些新知识:

  • ajax:

一种用于请求网址的技术

  • Javascript(简称JS):

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

  • css选择器之id选择器:

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

文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐