亚洲精品久久久久久中文字幂 ,国产亚洲精品电影网站在线观看

文章插圖
本小節(jié)基本要求
了解html文件要點：
JSON格式的數(shù)據(jù)Javascript(簡稱js)語言樣式選擇器之ID選擇器目前樣式：目標(biāo)：利用Ajax動態(tài)獲取文章數(shù)據(jù)，成就動態(tài)頁面。
Step1：構(gòu)建JSON格式數(shù)據(jù)新建文件夾，建立一個.json后綴的文件，這個文件里存放的是我們的文章數(shù)據(jù) 。
代碼如下：
{"hot": [{"id": 1,"title": "Zabbix"},{"id": 2,"title": "Prometheus"},{"id": 3,"title": "Java yyds!"},{"id": 4,"title": "什么？卡卡羅特對波又輸了？"},{"id": 5,"title": "一千零一夜"},{"id": 100,"title": "問風(fēng)"}],"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篇文章標(biāo)題什么？你問我JSON格式的數(shù)據(jù)為什么長這樣？為什么帶個{},為什么帶個[ ]?
因為大家都這樣寫，所有就成這樣咯。
ps：現(xiàn)在開發(fā)網(wǎng)站幾乎全部都是用的json格式構(gòu)建的數(shù)據(jù) 。學(xué)會這種格式，難道不重要嗎？
這是一個很火的學(xué)習(xí)網(wǎng)站：www.baidu.com
Step2：Id選擇器使用這點作了修改，給ul添加了Id選擇器。
為什么添加ID選擇器，看Step4
Step3：引入jquery文件:這是個工具下載地址：https://code.jquery.com/jquery-1.11.0.min.js
直接右鍵屏幕另存為就可以了。
創(chuàng)建js文件夾，將文件放入，并且在body.html頁面引入該文件：如下：
<scriptsrc="https://www.520longzhigu.com/js/jquery-3.1.1.js"></script>Step4: Ajax請求json文件，獲取json數(shù)據(jù)代碼如下：
<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：右鍵運行，結(jié)果如下：附本篇body.html中的所有追加的代碼：
JS部分：
<scriptsrc="https://www.520longzhigu.com/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></main></div></body>我都用了哪些新知識：ajax：一種用于請求網(wǎng)址的技術(shù)

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：

ajax請求的五個步驟 ajax發(fā)送json請求