html 值追加,从JSON中读取数据追加到HTML中

在写内容逻辑重复性的页面时，用json数据可以显著提高编程效率，并且便于后期的数据维护。因此，在视频专题页面，需要展示多列视频数据，我选择了用json。

HTML如下(只展示重点部分，需要引用JQ)

热门视频

JS如下

$(document).ready(function(){

console.log(1111)

$.getJSON('data.json',function(data){

console.log(222)

var mediahtml="";

$.each(data,function(i,data) {

mediahtml+='

''+

' '+data%5B

'" alt="">'+

''+'

''+

data["classify"]+

''+

data['titlename']+

''+

' '+

''+data['pubdate']+''+

'+data["intro"]+'

'嘉'+

''+data["name"]+''+

''+data["position"]+''+

''+

// var url_mobi=data.url_mobi;

// var url_pc=data.url_pc;

// if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {

// $('.modal-body').prepend(url_mobi);

// }else{

// $('.modal-body').prepend(url_pc);

// }

})

$('.medialist').after(mediahtml);

})

$('#myModal').on('shown.bs.modal', function (e) {

// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零

$(this).css('display', 'block');

var modalHeight = $(window).height() / 2 - $('#myModal .modal-dialog').height() / 2;

$(this).find('.modal-dialog').css({

'margin-top': modalHeight

});

//点击预览图时判断

// $('.modal').on('click', function () {

// if ($('#myModal').css("display") == "none") {

// $('.modal-body').children('iframe').attr('src', '');

// } else {

// $('.modal-body').children('iframe').attr('src',

// 'https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0');

// }

// })

注释部分可不看，不影响内容。

首先要新建json文件，json文件需注意的问题是：json对数据格式有要求，不识别url中的各类符号，因此会提示错误，如果不修复，则会阻断JS进程，造成数据在页面不显示，这个问题我找了好久才发现，而且json问题在js中不会报错。解决办法是利用encode方法，格式化url，然后再添加进json即可，在html中应该还要用decode转回来。

第二个坑是插入html到某个标签中,有四个方法，用after就可以实现，不要用反了。

第三点是需要注意，不要在拼接字符串的时候忘掉加号，少一个就会出问题，一个小问题会找好久才发现，而且拼接错误JS不会报错，很难发现。

效果如下：

bVZwew?w=1215&h=693

以上就是几个小问题明天继续补充。

html 值追加,从JSON中读取数据追加到HTML中相关推荐

中读取数据_Flink入门实战 (中)
一.Flink 流处理 API 1.Environment getExecutionEnvironment 创建一个执行环境,表示当前执行程序的上下文. 如果程序是独立调用的,则此方法返回本地执行环 ...
java 从excel中读取数据_在Java中读取Excel文件的内容和导出数据到Excel文件中
转自www.chianjavaworld.net 原作者:SonyMusic 读:rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr 在Java ...
猜数游戏(从文件中读取数据)
猜数游戏:有三次猜数字机会,如果用完三次机会则需要去网站充值.如果没有用完三次机会则可以继续玩.玩游戏的次数存储在文件中. 思路:(待补充) import java.util.Random; impo ...
C++从文件中读取数据，打印（追加打印）至文件
无论读取还是打印,都需要在开始引入<fstream>头文件,我们需要用到里面的对于文件的函数操作. 文件读取首先来说从文件中读取.我们定位文件所在具体位置,指向目标文件,这里的myfil ...
python xlsx追加数据_python 实现众多excel表格中关键数据追加项目配置库台账.xlsx...
网上已经有很多这类的文章了,今天写这个就算是对今天的写的这个脚本的一个巩固和说明吧,话说同事每个月末都要从大量的excel表格中导出一点点数据并输出到另一个表格中,所以想啊,写个脚本自动化一点吧,不然 ...
python 动态变量 excel 配置_python 实现众多excel表格中关键数据追加项目配置库台账.xlsx...
网上已经有很多这类的文章了,今天写这个就算是对今天的写的这个脚本的一个巩固和说明吧,话说同事每个月末都要从大量的excel表格中导出一点点数据并输出到另一个表格中,所以想啊,写个脚本自动化一点吧,不然 ...
vc++从txt文件中读取数据
数值分析课上老师说要将数据写在txt文件上,然后让程序从txt文件中读取数据.让本来C++已经遗忘了很久的我们无从下手,在网上也查看了很多,发现大多都是扯淡,放在VC++编辑器上发现并不能运行,不知道 ...
python读文件和写文件-python开发--从文件中读取数据和写入文件
#! /usr/bin/env python -*- coding:utf-8 -*- """ @Author:gcan @Email:1528667112@qq.com ...
HBase建表高级属性，hbase应用案例看行键设计，HBase和mapreduce结合，从Hbase中读取数据、分析，写入hdfs，从hdfs中读取数据写入Hbase，协处理器和二级索引
1. Hbase高级应用 1.1建表高级属性下面几个shell 命令在hbase操作中可以起到很到的作用,且主要体现在建表的过程中,看下面几个create 属性 1. BLOOMFILTER 默认是 ...

html 值追加,从JSON中读取数据追加到HTML中

html 值追加,从JSON中读取数据追加到HTML中相关推荐

最新文章

热门文章