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

khs1994 發(fā)布于2019-08-01 18:05 / 691人閱讀

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

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

HTML如下（只展示重點部分，需要引用JQ）

JS如下

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

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

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

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

效果如下：

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

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

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

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

相關(guān)文章

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

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

habren 2019-08-21 17:50 評論0 收藏0
從JSON中讀取數(shù)據(jù)追加到HTML中

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

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

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

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

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

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

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

jaysun 2019-07-31 10:14 評論0 收藏0