從JSON中讀取數(shù)據(jù)追加到HTML中

habren 發(fā)布于2019-08-21 17:50 / 2767人閱讀

摘要：在寫內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí)，用數(shù)據(jù)可以顯著提高編程效率，并且便于后期的數(shù)據(jù)維護(hù)。因此，在視頻專題頁(yè)面，需要展示多列視頻數(shù)據(jù)，我選擇了用。解決辦法是利用方法，格式化，然后再添加進(jìn)即可，在中應(yīng)該還要用轉(zhuǎn)回來。

在寫內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí)，用json數(shù)據(jù)可以顯著提高編程效率，并且便于后期的數(shù)據(jù)維護(hù)。因此，在視頻專題頁(yè)面，需要展示多列視頻數(shù)據(jù)，我選擇了用json。

HTML如下（只展示重點(diǎn)部分，需要引用JQ）

JS如下

注釋部分可不看，不影響內(nèi)容。

首先要新建json文件，json文件需注意的問題是：json對(duì)數(shù)據(jù)格式有要求，不識(shí)別url中的各類符號(hào)，因此會(huì)提示錯(cuò)誤，如果不修復(fù)，則會(huì)阻斷JS進(jìn)程，造成數(shù)據(jù)在頁(yè)面不顯示，這個(gè)問題我找了好久才發(fā)現(xiàn)，而且json問題在js中不會(huì)報(bào)錯(cuò)。解決辦法是利用encode方法，格式化url，然后再添加進(jìn)json即可，在html中應(yīng)該還要用decode轉(zhuǎn)回來。

第二個(gè)坑是插入html到某個(gè)標(biāo)簽中,有四個(gè)方法，用after就可以實(shí)現(xiàn)，不要用反了。

第三點(diǎn)是需要注意，不要在拼接字符串的時(shí)候忘掉加號(hào)，少一個(gè)就會(huì)出問題，一個(gè)小問題會(huì)找好久才發(fā)現(xiàn)，而且拼接錯(cuò)誤JS不會(huì)報(bào)錯(cuò)，很難發(fā)現(xiàn)。

效果如下：

以上就是幾個(gè)小問題明天繼續(xù)補(bǔ)充。

GPU云服務(wù)器云服務(wù)器 js中json中追加數(shù)據(jù) linux從管道中讀取數(shù)據(jù) c從文件中讀取數(shù)據(jù) js從cookie中讀取數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90078.html

相關(guān)文章

從JSON中讀取數(shù)據(jù)追加到HTML中

摘要：在寫內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí)，用數(shù)據(jù)可以顯著提高編程效率，并且便于后期的數(shù)據(jù)維護(hù)。因此，在視頻專題頁(yè)面，需要展示多列視頻數(shù)據(jù)，我選擇了用。解決辦法是利用方法，格式化，然后再添加進(jìn)即可，在中應(yīng)該還要用轉(zhuǎn)回來。在寫內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí)，用json數(shù)據(jù)可以顯著提高編程效率，并且便于后期的數(shù)據(jù)維護(hù)。因此，在視頻專題頁(yè)面，需要展示多列視頻數(shù)據(jù)，我選擇了用json。 HTML如下（只展示重點(diǎn)部分...

khs1994 2019-08-01 18:05 評(píng)論0 收藏0
從JSON中讀取數(shù)據(jù)追加到HTML中

摘要：在寫內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí)，用數(shù)據(jù)可以顯著提高編程效率，并且便于后期的數(shù)據(jù)維護(hù)。因此，在視頻專題頁(yè)面，需要展示多列視頻數(shù)據(jù)，我選擇了用。解決辦法是利用方法，格式化，然后再添加進(jìn)即可，在中應(yīng)該還要用轉(zhuǎn)回來。在寫內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí)，用json數(shù)據(jù)可以顯著提高編程效率，并且便于后期的數(shù)據(jù)維護(hù)。因此，在視頻專題頁(yè)面，需要展示多列視頻數(shù)據(jù)，我選擇了用json。 HTML如下（只展示重點(diǎn)部分...

Jaden 2019-08-29 13:54 評(píng)論0 收藏0
Python3網(wǎng)絡(luò)爬蟲實(shí)戰(zhàn)---31、數(shù)據(jù)存儲(chǔ)：文件存儲(chǔ)

摘要：如果該文件已存在，文件指針將會(huì)放在文件的結(jié)尾。運(yùn)行結(jié)果以上是讀取文件的方法。為了輸出中文，我們還需要指定一個(gè)參數(shù)為，另外規(guī)定文件輸出的編碼。上一篇文章：Python3網(wǎng)絡(luò)爬蟲實(shí)戰(zhàn)---30、解析庫(kù)的使用：PyQuery下一篇文章：Python3網(wǎng)絡(luò)爬蟲實(shí)戰(zhàn)---32、數(shù)據(jù)存儲(chǔ)：關(guān)系型數(shù)據(jù)庫(kù)存儲(chǔ):MySQL 我們用解析器解析出數(shù)據(jù)之后，接下來的一步就是對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)了，保存的形式可以...

dreamans 2019-07-31 10:35 評(píng)論0 收藏0
后端知識(shí)點(diǎn)總結(jié)——NODE.JS基礎(chǔ)

摘要：后端知識(shí)點(diǎn)總結(jié)基礎(chǔ)不是是一種軟件開發(fā)平臺(tái)，它的競(jìng)爭(zhēng)對(duì)象歷史第一次有一種語(yǔ)言可以通吃前后端網(wǎng)站阿里云鏡像版本年初年中年底最新版本功能強(qiáng)大可靠，適合大型企業(yè)級(jí)項(xiàng)目簡(jiǎn)單易用適合互聯(lián)網(wǎng)項(xiàng)目易用適合平臺(tái)性能好適合服務(wù)器端密集型項(xiàng)目不適合密集型項(xiàng)目密集后端知識(shí)點(diǎn)總結(jié)——NODE.JS基礎(chǔ) 1.Node.js Node.js不是JS,是一種軟件開發(fā)平臺(tái)，它的競(jìng)爭(zhēng)對(duì)象JSP/PHP/ASP.NET...

Freeman 2019-08-22 16:13 評(píng)論0 收藏0
多線程+代理池爬取天天基金網(wǎng)、股票數(shù)據(jù)(無需使用爬蟲框架)

摘要：本次使用天天基金網(wǎng)進(jìn)行爬蟲，該網(wǎng)站具有反爬機(jī)制，同時(shí)數(shù)量足夠大，多線程效果較為明顯。技術(shù)路線代理池多線程爬蟲與反爬編寫思路首先，開始分析天天基金網(wǎng)的一些數(shù)據(jù)。一旦使用多線程，則需要考慮到數(shù)據(jù)的讀寫順序問題。 @[TOC] 簡(jiǎn)介提到爬蟲，大部分人都會(huì)想到使用Scrapy工具，但是僅僅停留在會(huì)使用的階段。為了增加對(duì)爬蟲機(jī)制的理解，我們可以手動(dòng)實(shí)現(xiàn)多線程的爬蟲過程，同時(shí)，引入IP代理池進(jìn)行...

jaysun 2019-07-31 10:14 評(píng)論0 收藏0