随笔 - 228
1.下载安装jquery
可通过下面的方法引入在线版本的js：
&script&src=""&&/script&
参考安装文档：
2.准备一个json格式的文件，后缀可以不是.json
例如下面是result.json的格式
{& & "title":"【UI测试结果】-转转&14:47",& & "starttime":"&15:00&45",& & "endtime":"&15:01&42",& & "passcount":10,& & "failurecount":5,& & "resultinfo":[& & & & {& & & & & & "name":"发布",& & & & & & "moudle":"Publish",& & & & & & "pass":"true",& & & & & & "onecepass":"true",& & & & & & "log":"true"& & & & },& & & & {& & & & & & "name":"登录",& & & & & & "moudle":"Login",& & & & & & "pass":"false",& & & & & & "onecepass":"true",& & & & & & "log":"asserterrorlog",& & & & & & "failurereason":{& & & & & & & & & & & & & & & & "errorlog":"asserterror",& & & & & & & & & & & & & & & & "errorimg":"./登录.jpg"& & & & & & & & & & & & & & }& & & & }& & ]}
3.通过$.getJSON获得Json文件的数据
例如下面的例子：读取result.json文件的内容，存储到result变量中，结果是一个json格式
$.getJSON('./result.json',function(result){}
4.通过【$('#元素id').after(html内容);】将html内容添加到定位到的元素后面
元素定位方式
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class
插入html内容位置：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
Json数据的操作
JSON对象[key]来读取内容：result['title’]，或者用result.”title"
数组的对象值，可以通过$.each来获得数据：
$.each(JSON数组对象,function(遍历索引i，遍历对象){操作遍历的对象})
读取result.json，追加html的代码如下
(jquery需要写在&script&标签内）
&!DOCTYPE&HTML&PUBLIC&"-//W3C//DTD&HTML&4.0&Transitional//EN"&&HTML&&HEAD&&TITLE&&New&Document&&/TITLE&
&meta&http-equiv="Content-Type"&content="text/&charset=gb2312"&&script&src=""&&/script&
$(document).ready(function(){//使用getJSON方法读取json数据,
//注意：info.json可以是不同类型文件，只要其中的数据为json类型即可
& &$.getJSON('./result.json',function(result){
& & & var&html_title='';
& & & var&html_resultinfo='';
&html_title&+=&'&b&'+result["title"]+'&/b&';
&$('#resultitle').after(html_title);
&$.each(result["resultinfo"],function(i,item){
& & if(item["pass"]=="true")&{
& & & & html_resultinfo&+=&'&tr&&td&'&+&item['name']&+&'&/td&'&+
& & & & & & & & '&td&'&+&item['moudle']&+&'&/td&'&+
& & & & & & & & '&td&'&+&item["pass"]&+&'&/td&'&+
& & & & & & & & '&td&'&+&item['onecepass']&+&'&/td&'&+
& & & & & & & & '&td&id="'&+&item['moudle']&+&'"&class="collapsed"&onclick="collapsedisplay('&+&item['moudle']&+&')"&&u&style="color:&"&展开&/u&&/td&&/tr&';
& & & & & & & & html_resultinfo&+='&tr&id="'&+&item['moudle']&+&'info"&class="collapsedinfo"&style="display:none"&&td&colspan="5"&'&+&item['log']&+&'&/td&&/tr&';
$('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
&BODY&&div&style="margin-top:&30px"&& & &div&style="font-size:&30text-align:&center"&& & & & &p&id="resultitle"&&&/p&
& & &/div&
& & &/div&& & &div&id="resultinfo"&style="clear:&padding-top:&30px"&& & & & &table&style="width:&1080px"&& & & & & & &tr&id="infotitle"&& & & & & & & & &th&style="width:360px"&用例名称&/th&& & & & & & & & &th&style="width:200px"&模块名称&/th&& & & & & & & & &th&style="width:180px"&是否成功&/th&& & & & & & & & &th&style="width:180px"&一次成功&/th&& & & & & & & & &th&style="width:160px"&详情&/th&&/tr&& & & & &/table&& & &/div&&/div&&/BODY&&/HTML&
阅读(...) 评论()从JSON中读取数据追加到HTML中
原创
 16:33:55
282
在写内容逻辑重复性的页面时，用json数据可以显著提高编程效率，并且便于后期的数据维护。因此，在视频专题页面，需要展示多列视频数据，我选择了用json。本文我们就和大家分享从JSON中读取数据追加到HTML中的方法，希望能帮助到大家。HTML如下（只展示重点部分，需要引用JQ）&p class=&container-fluid content &&
&p class=&container neirong&&
&p class=&left fl&&
&p class=&title&&
&p class=&medialist&&
&/p&JS如下&script&
$(document).ready(function(){
console.log(1111)
$.getJSON('data.json',function(data){
console.log(222)
var mediahtml=&&;
$.each(data,function(i,data) {
mediahtml+='&p class=&media&&'+
'&p class=&media-left&&'+
'&a data-toggle=&modal& data-target=&#myModal&&'+
'&img class=&media-object& src=&'+data[&imgsrc&]+
'& alt=&&&'+
'&/a&'+'&/p&'+
'&p class=&media-body&&'+
'&p class=&title&&'+
'&span class=&classify&&'+
data[&classify&]+
'&/span&'+
'&span class=&titlename media-heading&&'+
data['titlename']+
'&/span&'+
'&/p&'+
'&span class=&time&&'+
'&span class=&glyphicon glyphicon-time&&&/span& '+
'&span&'+data['pubdate']+'&/span&'+
'&p&'+data[&intro&]+'&/p&'+
'&p class=&guest&&'+
'&span class=&jia&&嘉&/span&'+
'&span class=&name&&'+data[&name&]+'&/span&'+
'&span class=&position&&'+data[&position&]+'&/span&'+
'&span class=&glyphicon glyphicon-eye-open&&&/span&'+
'&span class=&click-rite&&&/span&'+
'&/p&'+
'&/p&'+
'&p class=&modal fade& id=&myModal& tabindex=&-1& role=&dialog& aria-labelledby=&myModalLabel&&'+
'&p class=&modal-dialog& role=&document&&'+
'&p class=&modal-content&&'+
'&p class=&modal-header&&'+
'&button type=&button& class=&close& data-dismiss=&modal& aria-label=&Close&&'+
'&span aria-hidden=&true&&&&/span&'+
'&/button&'+
'&/p&'+
'&p class=&modal-body&&&/p&'+
'&/p&'+
'&/p&'+
'&/p&'
var url_mobi=data.url_
var url_pc=data.url_
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
$('.modal-body').prepend(url_mobi);
$('.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', '');
$('.modal-body').children('iframe').attr('src',
'https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0');
&/script&注释部分可不看，不影响内容。首先要新建json文件，json文件需注意的问题是：json对数据格式有要求，不识别url中的各类符号，因此会提示错误，如果不修复，则会阻断JS进程，造成数据在页面不显示，这个问题我找了好久才发现，而且json问题在js中不会报错。解决办法是利用encode方法，格式化url，然后再添加进json即可，在html中应该还要用decode转回来。第二个坑是插入html到某个标签中,有四个方法，用after就可以实现，不要用反了。第三点是需要注意，不要在拼接字符串的时候忘掉加号，少一个就会出问题，一个小问题会找好久才发现，而且拼接错误JS不会报错，很难发现。效果如下：相关推荐：以上就是从JSON中读取数据追加到HTML中的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
全栈工程师
文章总浏览数html如何把数据库中读取的html标签输出_百度知道
html如何把数据库中读取的html标签输出
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
小锄头andrew
来自电脑网络类芝麻团
小锄头andrew
采纳数：224
获赞数：467
参与团队：
在html中用ajax请求获取到数据库中的html标签后，用outerHTML将html标签内容动态追加到页面，就可以了：&html&&head&&title&Demo&/title&&style&&!--&　body&{font-family:&宋体&;color=&blue&;font-size=&9pt&}&　--&&&/style&&script&language=&JavaScript&&//.innerHTMLfunction&innerHTMLDemo(){test_id1.innerHTML=&&i&&u&设置或获取位于对象起始和结束标签内的HTML.&/u&&/i&&;}//.innerTextfunction&innerTextDemo(){test_id2.innerText=&&i&&u&设置或获取位于对象起始和结束标签内的文本.&/u&&/i&&;}//.outerHTMLfunction&outerHTMLDemo(){test_id3.outerHTML=&&i&&u&设置或获取对象及其内容的&HTML&形式.&/u&&/i&&;}//.outerTextfunction&outerTextDemo(){test_id4.outerText=&&i&&u&设置(包括标签)或获取(不包括标签)对象的文本.&/u&&/i&&;}&/script&&/head&&body&&ul&&li&id=&test_id1&&onclick=&innerHTMLDemo()&&innerHTML效果.&/li&&li&id=&test_id2&&onclick=&innerTextDemo()&&innerText效果.&/li&&li&id=&test_id3&&onclick=&outerHTMLDemo()&&outerHTML效果.&/li&&li&id=&test_id4&&onclick=&outerTextDemo()&&outerText效果.&/li&&/ul&&/body&&/html&
IT类认证行家
采纳数：74
获赞数：79
直接返回到页面一个隐藏的DIV里面然后用javascript去拿这个div的内容最后用javascript直接把内容放在某个节点后面
来自电脑网络类芝麻团
采纳数：236
获赞数：989
参与团队：
第一步：将取出的标签转换成字符串，比如：var html = &&div&这就是标签字符串&/div&&第二步：在html中的节点插入：document.body.innerHTML = html就完成了
采纳数：39
获赞数：61
&pre&&&&html&&&&&&head&&&&&&title&我的第一个&HTML&页面&/title&&&&&&/head&&&&&&body&&&&&&p&body&元素的内容会显示在浏览器中。&/p&&&&&&p&title&元素的内容会显示在浏览器的标题栏中。&/p&&&&&&/body&&&&&&&&&&/html&&&&/pre&用&pre&标签
其他1条回答
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。求助，如何获取Html5中收集的数据至数据库？【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：163,337贴子：
求助，如何获取Html5中收集的数据至数据库？收藏
例如最简单的H5页面，输入姓名，点击提交，然后就将姓名储存至MySql中。。求思路我能去找找资料。。之前做数据方面的，只用过python、java，现在要对接前端收集一点数据。。
千锋javascript,名企内部推荐就业,入学签订就业协议,2周免费试学!千锋javascript,20周快速成为高级开发工程师,就业“薪”踏板!
最简单的就是form表单提交了，浏览器自动实现的，表单action属性是一个url，表单onsubmit时浏览器以http(s)协议向这个url提交表单数据，后端接收后就可以进行处理，包括验证啊、存入数据库什么的，不懂后端，大概是这个意思。
登录百度帐号使用js的ajax方法读取txt文本里面的JSON数据并追加到Html元素节点上
list.txt内容：
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
javascript内容：
&script src="~/Scripts/jquery-1.8.2.js"&&/script&
$(function () {
type: "GET",
url: "Content/list.txt",
dataType: "json",
success: function (data) {
console.info(data);
for (var i = 0; i & data. i++) {
var trTD = "&tr&&td&" + data[i].optionKey + "&/td&&td&" + data[i].optionValue + "&/td&&/tr&";
$("#tb").append(trTD);
html内容：
&table id="tb"&&tr&&td&第一个&/td&&td&第二个&/td&&/tr&&/table&
&input id="button" type="button" value="O(∩_∩)O"/&
备注：这里面的ajax请求必须是GET方式，原因是在这里POST方法是不被允许的（405）HTTP 405 错误 – 方法不被允许 (Method not allowed)
详情参阅下面的网址:http://www.checkupdown.com/status/E405_cn.html
js下Ajax读取txt文件内容
ajax如何请求本地txt文件时
ajax读取txt文本内容
使用HTML+javascrpt读取txt文本文件
后台传的json 数据遍历到HTML 页面
AJAX 读取TXT内容
怎么利用js读取txt文件
Ajax之追加到表格
没有更多推荐了，