jso java_Javaweb学习之JSON使用
学习目的
了解JSON的基础概念和作用
掌握JSON的基础使用
掌握JSON在实
一、JSON入门
概念
JSON全称JavaScript Object Notation,意为JavaScript对象标记,简称JSON。JSON本质是一种标准的数据交换格式,是目前市场上非常流行,90%以上的系统采用的交换数据的格式(不同编程语言之间进行数据交换的格式)。JSON也可以称为无类型对象,轻量级、轻巧、体积小、易解析。
特点
JSON是一种标准的轻量级的数据交换格式,其体积小,易解析;
JSON在JS中以JS对象的形式存在;
java后端与浏览器前端进行数据交互的"工具"就是JSON,java获取的数据以字符串格式返回到浏览器,浏览器中的JS将字符串数据封装成JSON格式对象进行解析展示
JSON与XML
在实际的开发中有两种常用数据交换格式使用最多,其一是JSON,另一个是XML。
XML体积较大,解析麻烦,但是有其优点是:语法严谨。(通常银行相关的系统之间进行数据交换使用XML)
// XML定义对象
张三
24
男
里斯
21
男
王五
20
女
JSON的语法格式
// 创建JSON对象:JSON也可以称为无类型对象
var jsonObj = {
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};
示例
// 定义传统JS对象
Student = function(sno,sname,sex){
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
// 创建对象
var stu = new Student("111","李四","男");
// 访问JS对象的属性
alert(stu.sno + "," + stu.sname + "," + stu.sex);
// 定义:JSON格式对象,对象定义与创建合并
var studentObj = {
"sno" : "110",
"sname" : "张三",
"sex" : "男"
}
// 访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);;
JSON数组
在目前的开发中,所有流行的编程语言用于数据交换的格式都是JSON。而在JAVA中,数据是以对象的形式存在的,当java中的多个对象返回给浏览器时,通常JS采用JSON数组的形式存储java返回的多个数据。
// []代表的是一个数组,{}代表的是一个JSON对象
var students = [
{"sno":"110","sname":"张三","sex":"男"},
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"130","sname":"王五","sex":"男"}
];
1.1 eval函数
描述
eval函数是可以将JS中的字符串当做一段JS代码解释并执行的函数。
应用场景
在java连接数据库进行查询数据之后,会将查询得到的数据在java程序中拼接成JSON格式的“字符串”,再将json格式的字符串返回到浏览器。因此java返回到浏览器上的仅仅是一个"JSON格式的字符串",而不是一个json对象,浏览器需要使用eval函数 将json格式的字符串转换成json对象才能完整的展示返回的数据。
格式
window.eval("字符串" );
示例
// var i = 100;原本是普通字符串,但用在js中则是定义变量
window.eval("var i = 100;");
alert("i = " + i); // i = 100
// 将json格式的字符串转换成json对象,\为转义符
var fromJava = "{\"name\":\"zhangsan\",
\"password\":\"123\",
\"sex\":\"男\"}"; // java发给浏览器的json格式"字符串"
// 将以上json格式字符串转换成json对象
window.eval("var jsonObj = " + fromJava);
// 访问json对象,浏览器端执行输出
alert(jsonObj.name + "," + jsonObj.password);
1.2 JSON数据与表格
描述
在JS中,java后台发送到前端浏览器的数据通常存储在JSON对象中,而JS常用的解析方式就是将JSON数据解析完成后 动态显示在
示例
// json数据
var data = {
"total" : 4,
"emps" : [
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7361,"ename":"SMITH2","sal":1800.0},
{"empno":7360,"ename":"SMITH3","sal":2800.0},
{"empno":7362,"ename":"SMITH4","sal":3800.0}
]
};
// 把JSON数据展示到table当中.
window.onload = function(){
// 当点击显示按钮后,获取JSON数据并显示
var displayBtnElt = document.getElementById("displayBtn");
displayBtnElt.onclick = function(){
// 将JSON数据用变量存储
// var emps = data.emps;
var html = "";
// 循环遍历JSON数组,得到JSON中的每一个具体对象
for(var i = 0; i < data.emps.length; i++){
var emp = data.emps[i];
// 字符串拼接,返回时在解析
html += "
";
html += "
"+emp.empno+"";
html += "
"+emp.ename+"";
html += "
"+emp.sal+"";
html += "
";
}
// 往table标签的tbody中插入HTML代码
document.getElementById("emptbody").innerHTML = html;
// 往span中插入HTML代码
document.getElementById("count").innerHTML = data.total;
}
}
员工信息列表
员工编号 | 员工名字 | 员工薪资 |
---|
总共0条数
常见面试题
在JS当中:[]和{}有什么区别?
[] 描述的是数组对象。
{} 描述的是JSON格式对象。
jso java_Javaweb学习之JSON使用相关推荐
- Android-入门学习笔记-JSON 解析
4 构建优秀 UI 的技巧 6 USGS 地震实时反馈和通知: http://earthquake.usgs.gov/earthquakes/feed/v1.0/index.php 电子表格格式的 U ...
- lept_json的学习之JSON
lept_json库的学习1 从两个星期前开始,在github上跟着叶劲峰老师的lept_json学习了一遍,现在来回顾一下整个过程,做些笔记之类的. 本人的记录风格是废话一大堆,所以不爱看的可以骂我 ...
- JavaWeb学习笔记——JSON详解
本文是学习Java时所记录的学习笔记,本节记录了JSON的相关知识,需要掌握JSON的书写格式,懂得JSON与String类型的转换. 文章目录 JSON简介 什么是JSON? JSON语法规则 JS ...
- Kotlin学习之json数据解析
通过这篇文章,可以学习到 1. 如何根据json数据创建一个对应的数据类 2. 如何根据json数据创建一个对象 (一)根据json数据创建一个对应的数据类 data class Test(val c ...
- Python可视化学习——使用JSON进行数据转换、pyecharts模块调用以及可视化案例的介绍(可视化案例数据暂无),柱状图及动态柱状图的构建
数据可视化 可视化效果一:2020年印美日新冠累计确诊人数 2020年是新冠疫情爆发的一年,随着疫情的爆发,国内外确诊人数成了大家关心的热点,相信大家都有看过类似的疫情报告.本案例对印度美国日本三个国 ...
- python解析json_【python学习】json解析
从一个网页获取数据,并按json格式进行转换. from urllib import request import json def fetch_data(url): req = request.Re ...
- 10. JavaScript学习笔记——JSON
10. JSON ///[JSON是一种数据格式,不是JS 独有的] ///[JSON语法] /* 1.数据书写格式:"name":value,JSON要求给属性名加上[双引号], ...
- Android学习之JSON数据解析
在Android应用开发中,常用的数据交换格式有XML和JSON,这两种方式各有各的好处,我们在特定的应用开发中可以选择合适的一种.下面来看一下JOSN数据解析: 例子永远是最好的教程,下面我们来看个 ...
- Python学习之==json处理
json是一种所有语言都通用的Key-Value数据结构的数据类型,很像Python中的字典,在Python中可以通过json模块对json串和字典进行转换. 1.把字典转换成json串 1 impo ...
- 13 vue学习 package.json
一:package.json文件详解 管理你本地安装的npm包 .定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据).npm install命令根据这个配置文件,自动 ...
最新文章
- doxygen 注释规范_编程规范 - doxygen注释规范示例(C++)
- kernel 3.10代码分析--KVM相关--虚拟机创建\VCPU创建\虚拟机运行
- 通过JS如何获取IP地址
- 国外学python的软件_全球开发者调查报告:IT人最想学习 Go 和 Python、美国开发者收入最高...
- ACM常见错误提示及可能的解决办法
- Zookeeper和分布式环境中的假死脑裂问题(转)
- 双卡项目如何在状态栏显示或隐藏G,3G以及卡1和卡2的信号标识
- 程序员不是神,心态决定一切
- petshop4.0 详解之五(PetShop之业务逻辑层设计)(转帖)
- 高性能迷你React框架anujs1.0.8发布
- Unity中的Time
- Freeswitch部署
- 怎样更改计算机文件图标,文件夹图标怎么改?电脑更换文件夹图标的方法
- 白杨SEO:推广与运营有什么区别和相同?推广如何转运营?
- 零阶保持模型和一阶保持模型离散的推导
- FileZilla Client ftp上传软件
- 论剑乌镇-热点轮换谁能屹立不倒
- Knowledge Graph Embedding: A Survey of Approaches and Applications (2)
- 宽窄依赖以及shuffle的部分源码理解
- 浅谈对程序员的认识_8年编程生涯回顾:谈谈我对程序员的理解
热门文章
- 微软在华推广Win7拒绝“黑屏”
- 2.支付平台架构:业务、规划、设计与实现 --- 收银台系统
- 25.go doc 与 godoc
- 2. wordpress 友情链接的备份和导入
- 7. JavaScript RegExp 对象
- php中字符串与数组的相互转化explode(separator,$str)与implode(separator,$arr)
- javascript中的options.add() options.remove() options(index)或options.item(index)
- css属性中如果后面个三个值,那么中间的那个一般代表左右元素的值。
- 2、linux网络编程--无连接与面向连接的区别
- Python——语言基础