html代码放进json数据,用json数据填充html表
好的,在这个解决方案中,我假设您的外部json文件名为'example.json'
你的外部文件应该是这样的
示例.json:
[
{ "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
{ "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
{ "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
{ "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
{ "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
]
html保持不变,脚本标记中所做的所有更改都保持不变。我把功能分成两个新功能。第一个函数(get_json_data)从外部json文件获取json数据。第二个函数(append_json)将数据追加到表中。
我在整个代码中添加了注释来解释所有的工作。如果你有任何问题或不清楚的地方,请告诉我。
以下是HTML文件的代码:
*** OTHER STUFF HERE ***
  COUNTRY |   LOCATION |   BALANCE |   DATE |
---|
//first add an event listener for page load
document.addEventListener( "DOMContentLoaded", get_json_data, false ); // get_json_data is the function name that will fire on page load
//this function is in the event listener and will execute on page load
function get_json_data(){
// Relative URL of external json file
var json_url = 'example.json';
//Build the XMLHttpRequest (aka AJAX Request)
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {//when a good response is given do this
var data = JSON.parse(this.responseText); // convert the response to a json object
append_json(data);// pass the json object to the append_json function
}
}
//set the request destination and type
xmlhttp.open("POST", json_url, true);
//set required headers for the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// send the request
xmlhttp.send(); // when the request completes it will execute the code in onreadystatechange section
}
//this function appends the json data to the table 'gable'
function append_json(data){
var table = document.getElementById('gable');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '
' + object.COUNTRY + '' +
'
' + object.LoC + '' +
'
' + object.BALANCE + '' +
'
' + object.DATE + '';
table.appendChild(tr);
});
}
html代码放进json数据,用json数据填充html表相关推荐
- 代码放进word_在Word中插入代码并高亮显示(针对会编程的小伙伴)
有的时候需要将代码插入到文档当中,而你又不熟悉专门的排版语言.或者说只是临时需要.其实可以在Word中插入代码并使之进行高亮显示,达到和专用排版工具大致一样的效果,使代码的阅读体验更好. 如下图所示, ...
- JS-JSON-获取JSON对象中的数据展示到表格里
JS-JSON-获取JSON对象中的数据展示到表格里 1.要求 点击按钮,将学生信息展示到表格里,并显示总记录条数. 2.实现思路 创建JSON对象 先创建一个JSON对象data,有总人数total ...
- python处理大数据量json数据的方法_python-利用json模块处理json数据几个函数总结...
1.前言 json是一种轻量级的数据交换格式,它是JavaScript的子集,易于人阅读和编写. 前端和后端进行数据交互,其实就是JS和Python进行数据交互. 接口间或者前后端间的语言不一致,不同 ...
- SpringBoot/Java 将MongoDB中的数据转换为json文件
项目背景: 我最近在做SpringBoot的项目,其中数据库使用的是MongoDB,前端框架用的是layui.在我使用layui的数据表格组件时,其数据接口对应的是json文件,所有我得将MongoD ...
- tp数组转为json_数据存储—JSON
JSON文件存储 JSON全称JavaScript Object Notation,也就是JavaScript对象标记,它通过对象和数组的组合来表示数据. 1.对象和数组 对象:在JavaScript ...
- retrofit2 发送json数据_SQLmap JSON 格式的数据注入
现在越来越多的网站开始使用 RESTFUL 框架,数据传输使用 JSON,那么这种情况下我们如何使用 SQLmap 进行自动化注入呢? 能使用 * 指定注入点吗? 先说结论:对于 JSON 数据的 S ...
- jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量
jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量 jquery <!DOCTYPE html> <html lang="en&qu ...
- ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析 一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
- mysql json 函数_MYSQL 开发设计表是硬邦邦的VARHCAR 还是JSON TYPE 来处理数据更香
开发在使用MySQL中,建立比较大的VARCHAR字段来存储SQL执行的语句或者利用MYSQL 来存储什么VARCHAR(1000) VARCHAR(2000) 之类的事情比比皆是,实际上存储超高的字 ...
最新文章
- C#发现之旅第一讲 C#-XML开发
- 对外星智能的搜索得到了重大的升级
- VirtualBox中Ubuntu的全屏
- python【蓝桥杯vip练习题库】ALGO-69字符串逆序
- Blog-LOGO原型
- 第5节 三个败家子(5)——刘封,被封印的秘密
- 安卓的java无法访问网络_Android网络访问的基本方法
- git tag怎么使用_GIT中tag使用,打版本必备
- 不好意思,00后黑客CEO登场了!
- 贵阳中职计算机学什么区别,贵阳中职计算机专业
- [Axis2与Eclipse整合开发Web Service系列之二] Top-Down方式,通过WSDL逆向生成服务端
- Python中字符串的startswith()和endswith()方法
- python三维数组表示方法_Python操作多维数组和矩阵
- 用TensorFlow训练一个目标检测器(手把手教学版)
- IME Starters Try-outs 2018 题解
- micrium ucprobe使用笔记
- C# winform 工具箱、控件类型简介表
- 三维数组matlab怎么画图,三维数组画图遇到问题
- 汽车云智能采集服务 八爪鱼采集器在汽车行业网站的应用
- 有哪些在成都开了 20 年以上的味道不错的小饭馆
热门文章
- idea插件安装在哪个目录_从零开始编写自己需要的IntelliJ IDEA 插件
- 《我在谷歌大脑见习机器学习的一年:Node.js创始人的尝试笔记》阅读笔记
- JS 监听绑定和取消事件
- 由前序遍历和中序遍历确定二叉树
- thinkphp3.2.3 自动验证 正则验证
- 容易忽视但是功能灰常强大的Java API(二. 读写对象)
- 用MFC消息映射机制自定义消息
- 修改web.conf不重启服务的方法
- [导入]CommunityServer 1.1 源码及汉化文件
- Web文件管理原码.rar