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

本小节基本要求 了解html文件 要点: JSON格式的数据Javascript(简称js)语言样式选择器之ID选择器 目前样式: 目标: 利用Ajax动态获取文章数据,成就动态页面。 Step1:构建JSON格式数据 新建文件夹,建立一个.json后缀的文件,这个文件里存放的是我们的文章数据。 代码如下: { "hot":[ {"id":1, "title":"Zabbix" }, { …

本小节基本要求

  • 了解html文件

要点:

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

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

目前样式:

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

目标:

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

Step1:构建JSON格式数据

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

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

代码如下:

{
  \"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选择器使用

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

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

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

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

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

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

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

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

<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:右键运行,结果如下:

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

附本篇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选择器:

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

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/8931.html