JavaWeb之JSON、AJAX

JSON

什么是JSON：JSON: JavaScript Object Notation JS对象简谱 , 是一种轻量级的数据交换格式(JavaScript提供)

特点

'[{"name":"周珍珍", "age":18},{"name":"李淑文","age":20}]'
  1. 数据是以键值对形式（key : value）
  2. key必须使用双引号包裹
  3. JSON字符串最外层使用单引号包裹

三种数据格式比对

Java

class Student{private String name;private int age;
}Student stu1 = new Student("周珍珍", 18);
Student stu2 = new Student("李淑文", 20);Student[] stus = {stu1, stu2};

XML

<stus><stu1><name>周珍珍</name><age>18</age></stu1><stu2><name>李淑文</name><age>20</age></stu2>
</stus>

JSON

[{"name":"周珍珍", "age":18},{"name":"李淑文","age":20}]

JSON

  • 优点：轻量，相同的数据量下，占用的空间更少
  • 缺点：当数据量多之后，可读性变差

XML

  • 优点：结构化，可读性高
  • 缺点：相同的数据量下，占用的空间更多

JSON与js对象的转化

JSON字符串转js对象

var str = '{"name":"周珍珍", "age":18}';
var jsObj = JSON.parse(str);
console.log(jsObj);

注意：如果出现了不规范的JSON字符串

var str = '{name:"周珍珍", age:18}';

可以使用eval函数进行转化

var str = '{name:"周珍珍", age:18}';
var jsObj = eval('(' + str + ')');
console.log(jsObj);

JSON字符串转js数组

var arr = '[{"name":"周珍珍", "age":18},{"name":"李淑文","age":20}]';
var jsObj = JSON.parse(arr);
console.log(jsObj);

js对象转JSON字符串

var jsObj = {name:"周珍珍",age:18};var jsonStr = JSON.stringify(jsObj);
console.log(jsonStr);//{"name":"周珍珍","age":18}

js数组转JSON字符串

var jsArr = [{name:"周珍珍",age:18},{name:"李淑文",age:20}];var jsonStr = JSON.stringify(jsArr);
console.log(jsonStr);//[{"name":"周珍珍","age":18},{"name":"李淑文","age":20}]

Java与JSON的转化

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.42</version>
</dependency>

Object –> JSONString

将Java对象转化为JSON字符串
Teacher teacher1 = new Teacher("aaa", 23,  new Student("zzz", 18));
String json = JSON.toJSONString(teacher1);
System.out.println(json);//{"age":23,"name":"aaa","student":{"age":18,"name":"zzz"}}
将数组转化为JSON字符串
Teacher teacher1 = new Teacher("aaa", 23,  new Student("zzz", 18));
Teacher teacher2 = new Teacher("bbb", 27,  new Student("lsw", 20));
Teacher[] teachers = new Teacher[]{teacher1, teacher2};
String json = JSON.toJSONString(teachers);
System.out.println(json);
//[{"age":23,"name":"aaa","student":{"age":18,"name":"zzz"}},{"age":27,"name":"bbb","student":{"age":20,"name":"lsw"}}]
将Map转化为JSON字符串
Teacher teacher1 = new Teacher("aaa", 23, new Student("zzz", 18));
Teacher teacher2 = new Teacher("bbb", 27, new Student("lsw", 20));HashMap<String, Object> map = new HashMap<>();
map.put("teacher1", teacher1);
map.put("teacher2", teacher2);String json = JSON.toJSONString(map);
System.out.println(json);
//{"teacher2":{"age":27,"name":"bbb","student":{"age":20,"name":"lsw"}},"teacher1":{"age":23,"name":"aaa","student":{"age":18,"name":"zzz"}}}
将List转化为JSON字符串
Teacher teacher1 = new Teacher("aaa", 23, new Student("zzz", 18));
Teacher teacher2 = new Teacher("bbb", 27, new Student("lsw", 20));ArrayList<Teacher> list = new ArrayList<>();
list.add(teacher1);
list.add(teacher2);String jsonString = JSON.toJSONString(list);
System.out.println(jsonString);
//[{"age":23,"name":"aaa","student":{"age":18,"name":"zzz"}},{"age":27,"name":"bbb","student":{"age":20,"name":"lsw"}}]

JSONString –> Object

JSON字符串转JSONObject对象
String str = "{\"age\":23,\"name\":\"aaa\",\"student\":{\"age\":18,\"name\":\"zzz\"}}";JSONObject json = JSON.toJSON(str);System.out.println(json);//{"age":23,"name":"aaa","student":{"age":18,"name":"zzz"}}
System.out.println(json instanceof String);//trueint age = json.getIntValue("age");//23
String name = json.gteString("name");//aaa
JSON字符串转Java对象
String str = "{\"age\":23,\"name\":\"aaa\",\"student\":{\"age\":18,\"name\":\"zzz\"}}";
Teacher teacher = JSON.parseObject(str, Teacher.class);
System.out.println(teacher);
//Teacher{name = aaa, age = 23, student = Student{name = zzz, age = 18}}
JSON字符串转JSONArray数组对象
String str = "[{\"age\":23,\"name\":\"aaa\",\"student\":{\"age\":18,\"name\":\"zzz\"}},{\"age\":27,\"name\":\"bbb\",\"student\":{\"age\":20,\"name\":\"lsw\"}}]";JSONArray jsonArray = JSON.parseArray(str);System.out.println(jsonArray.get(0));
System.out.println(jsonArray.get(1));//{"student":{"name":"zzz","age":18},"name":"aaa","age":23}
//{"student":{"name":"lsw","age":20},"name":"bbb","age":27}
JSON字符串转Map对象
String str = "{\"teacher2\":{\"age\":27,\"name\":\"bbb\",\"student\":{\"age\":20,\"name\":\"lsw\"}},\"teacher1\":{\"age\":23,\"name\":\"aaa\",\"student\":{\"age\":18,\"name\":\"zzz\"}}}";HashMap<String, Student> map = new HashMap<>();Map<String, JSONObject> map1 = (Map<String, JSONObject>) JSON.parse(str);Set<Map.Entry<String, JSONObject>> entries = map1.entrySet();
for (Map.Entry<String, JSONObject> entry : entries) {Student student = JSON.parseObject(entry.getValue().toString(), Student.class);map.put(entry.getKey(), student);
}Set<Map.Entry<String, Student>> entries1 = map.entrySet();
for (Map.Entry<String, Student> entry : entries1) {System.out.println(entry.getKey());System.out.println(entry.getValue());
}
//teacher2
//Student{name = bbb, age = 27}
//teacher1
//Student{name = aaa, age = 23}
JSON字符转List对象
String str = "[{\"age\":23,\"name\":\"aaa\",\"student\":{\"age\":18,\"name\":\"zzz\"}},{\"age\":27,\"name\":\"bbb\",\"student\":{\"age\":20,\"name\":\"lsw\"}}]";List<Teacher> teachers = JSON.parseArray(str, Teacher.class);
for (Teacher teacher : teachers) {System.out.println(teacher);
}
//Teacher{name = aaa, age = 23, student = Student{name = zzz, age = 18}}
//Teacher{name = bbb, age = 27, student = Student{name = lsw, age = 20}}

Ajax请求

AJAX: Asynchronous JavaScript and XML.

AJAX是一种能够在无需加载整个页面的情况下，能够更新部分网页的技术

  1. 创建XMLHttpRequest对象

    function getXMLHttpRequest() {let xmlHttp;if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {//IE6及以下版本的浏览器xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}return xmlHttp;
}

  2. 为XMLHttpRequest对象绑定onreadystatechange事件

    const xmlHttp = getXMLHttpRequest();
//给xmlHttp对象绑定onreadystatechange事件
xmlHttp.onreadystatechange = function () {if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { //响应已就绪let text = xmlHttp.responseText;//获取后端返回的responseText对象（string类型）}
}

  3. 创建/初始化请求

    xmlHttp.open("GET","student?action=isRegister&username=aaa",true);//get请求
//---------------------------------------------------------------------------
xmlHttp.open("POST","student",true);//post请求：open方法（请求方式， 请求url，是否异步）

  4. 发送请求

    xmlHttp.send();//get请求
//---------------------------------------------------------------------------
//post请求需要设置请求头信息
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("username=bbb&age=18&sex=male");//post请求

AJAX实战：二级联动

数据库表：provinces（parent_code为上一级省市编码，code为本省市编码）

image-20240620174339407

mapper层：实现查询所有省份和所有城市

//接口 StudentMapper
public String queryProvinces();
public String queryCities(String parent_code);

//实现类 StudentMapperIpl
@Override
public String queryProvinces() {String sql = "select * from provinces where type = ?";try {List<Province> provinces = DBUtil.query(Province.class, sql, "province");return JSON.toJSONString(provinces);} catch (SQLException | InstantiationException | IllegalAccessException | NoSuchFieldException e) {throw new RuntimeException(e);}
}@Override
public String queryCities(String parent_code) {String sql = "select * from provinces where parent_code = ?";try {List<Province> cities = DBUtil.query(Province.class, sql, parent_code);return JSON.toJSONString(cities);} catch (SQLException | InstantiationException | IllegalAccessException | NoSuchFieldException e) {throw new RuntimeException(e);}
}

controller层：创建查询所有省份和对应城市的方法

//@WebServlet("/studentServlet")
//StudentController 继承自 BaseServlet
//查询所有省份
public void queryProvinces(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String str = studentMapper.queryProvinces();resp.getWriter().write(str);
}//查询所有城市
public void queryCities(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String parentCode = req.getParameter("parent_code");String str = studentMapper.queryCities(parentCode);resp.getWriter().write(str);
}

前端：实现二级下拉框动态更新

<%--省份--%>
<label for="province">省份:</label>
<select name="province" id="province"></select>
<%--城市--%>
<label for="city">省份:</label>
<select name="city" id="city"></select>

JavaScript：实现加载所有省份和省份变化的onchange事件

function previewImage(input) {// 检查input是否为File类型if (input.files && input.files[0]) {var reader = new FileReader();// 将图片文件以DataURL的形式读取reader.onload = function (e) {// 将读取到的图片设置为img标签的src属性var preview = document.getElementById('preview');preview.src = e.target.result;// 确保img标签显示新图片preview.style.display = 'block';};// 以DataURL的形式读取图片文件reader.readAsDataURL(input.files[0]);} else {// 如果不支持FileReader，或者没有选择文件，就隐藏img标签var preview = document.getElementById('preview');preview.style.display = 'none';}
}//展示所有省份
function displayProvince() {const xmlHttp = getXMLHttpRequest();//给xmlHttp对象绑定onreadystatechange事件xmlHttp.onreadystatechange = function () {if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {let provinces = JSON.parse(xmlHttp.responseText);console.log(provinces)let province = document.getElementById("province");for (let i = 0; i < provinces.length; i++) {let op = document.createElement("option");op.value = provinces[i].code;op.innerText = provinces[i].name;province.appendChild(op);}}}xmlHttp.open("GET", "studentServlet?action=queryProvinces", true);xmlHttp.send();
}//省份变化的城市信息动态更新（二级联动）
let province = document.getElementById("province");province.onchange = function () {let parent_code = this.value;//获取城市的parent_codeconsole.log(parent_code);const xmlHttp = getXMLHttpRequest();//给xmlHttp对象绑定onreadystatechange事件xmlHttp.onreadystatechange = function () {if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { //响应已就绪let cities = JSON.parse(xmlHttp.responseText);let city = document.getElementById("city");for (let i = 0; i < cities.length; i++) {let op = document.createElement("option");op.value = cities[i].code;op.innerText = cities[i].name;city.appendChild(op);}}}xmlHttp.open("GET", "studentServlet?action=queryCities&parent_code=" + parent_code, true);xmlHttp.send();
}//页面加载主动触发展示所有省份
displayProvince();

tById(“city”);
for (let i = 0; i < cities.length; i++) {
let op = document.createElement(“option”);
op.value = cities[i].code;
op.innerText = cities[i].name;
city.appendChild(op);
}
}
}
xmlHttp.open(“GET”, “studentServlet?action=queryCities&parent_code=” + parent_code, true);
xmlHttp.send();
}

//页面加载主动触发展示所有省份
displayProvince();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/31069.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

后端不提供文件流接口，前台js使用a标签实现当前表格数据(数组非blob数据)下载成Excel

后端不提供文件流接口，前台js使用a标签实现当前表格数据(数组非blob数据)下载成Excel

前言&#xff1a;开发过程中遇到的一些业务场景&#xff0c;如果第三方不让使用&#xff0c;后端不提供接口&#xff0c;就只能拿到table数据(Array)&#xff0c;实现excel文件下载。 废话不多说&#xff0c;直接上代码&#xff0c;方法后续自行封装即可&#xff1a; functio…
阅读更多...
微观时空结构和虚数单位的关系

微观时空结构和虚数单位的关系

回顾虚数单位的定义&#xff0c; 其中我们把称为周期&#xff08;的绝大部分&#xff09;&#xff0c;称为微分&#xff0c;0称为原点或者起点&#xff08;意味着新周期的开始&#xff09;&#xff0c;由此我们用序数的概念反过来构建了基数的概念。 周期和单位显然具有倍数关…
阅读更多...
在Maven工程中手动配置并测试SpringBoot（巨详）

在Maven工程中手动配置并测试SpringBoot（巨详）

本篇博客承继自博客&#xff1a; 在IDEA 2024.1.3 (Community Edition)中创建Maven项目_idea2024.1.3如何创建maven项目-CSDN博客 配置POM文件 打开工程中的pom.xml文件&#xff0c;先向其中写入 <parent><groupId>org.springframework.boot</groupId><…
阅读更多...
大厂的 404 页面都长啥样？看到最后一个，我笑了~

大厂的 404 页面都长啥样？看到最后一个，我笑了~

每天浏览各大网站&#xff0c;难免会碰到404页面啊。你注意过404页面么&#xff1f;猿妹搜罗来了下面这些知名网站的404页面&#xff0c;以供大家欣赏&#xff0c;看看哪个网站更有创意&#xff1a; 腾讯 网易 淘宝 百度 新浪微博 新浪 京东 优酷 腾讯视频 搜狐 携程 去哪儿 今…
阅读更多...
深度解析RocketMq源码-持久化组件（四） CommitLog

深度解析RocketMq源码-持久化组件（四） CommitLog

1.绪论 commitLog是rocketmq存储的核心&#xff0c;前面我们介绍了mappedfile、mappedfilequeue、刷盘策略&#xff0c;其实commitlog的核心组件我们基本上已经介绍完成。 2.commitLog的组成 commitLog的核心其实就是MqppedFilequeue&#xff0c;它本质上就是多个mappedFile…
阅读更多...
web中间件漏洞-weblogic漏洞-弱口令war包上传

web中间件漏洞-weblogic漏洞-弱口令war包上传

web中间件漏洞-weblogic漏洞-弱口令war包上传 弱口令war包上传 制作war包 jar cvf ma.war.(最后的.代表打包当前目录) 弱口令weblogic/weblogic123 点击部署后、一直点击下一步 访问webshell
阅读更多...
传输大文件之镭速自动清理过期文件

传输大文件之镭速自动清理过期文件

电子文档的普及无疑极大地便利了我们的工作与生活&#xff0c;但随之而来的是如何有效管理这些日益增多的文件。企业面临着存储空间紧张、文件传输复杂、敏感信息泄露等挑战。自动化文件清理的需求日益凸显&#xff0c;这不仅关乎个人对高效工作环境的追求&#xff0c;更是企业…
阅读更多...
Centos7安装自动化运维Ansible

Centos7安装自动化运维Ansible

自动化运维Devops-Ansible Ansible是新出现的自动化运维工具&#xff0c;基于Python 开发&#xff0c;集合了众多运维工具&#xff08;puppet 、cfengine、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置 、批量程序部署、批量运行命令 等功能。Ansible…
阅读更多...
【02】区块链技术应用

【02】区块链技术应用

区块链在金融、能源、医疗、贸易、支付结算、证券等众多领域有着广泛的应用&#xff0c;但是金融依旧是区块链最大且最为重要的应用领域。 1. 区块链技术在金融领域的应用 1.2 概况 自2019年以来&#xff0c;国家互联网信息办公室已发布八批境内区块链信息服务案例清单&#…
阅读更多...
Java8 --- Gradle安装及测试使用

Java8 --- Gradle安装及测试使用

目录 一、Gradle 1.1、简介 1.2、安装 1.2.1、注意事项 1.2.2、安装流程 1.2.3、配置共享仓库 1.3、构建项目 1.4、常用指令 1.4.1、gradle classes 1.4.2、gradle clean 1.4.3、gradle test 1.4.4、gradle build 1.5、修改Maven下载源 1.6、Wrapper包装器 1.…
阅读更多...
Samtec制造理念系列二 | 差异变量管理的意义与挑战

Samtec制造理念系列二 | 差异变量管理的意义与挑战

【摘要/前言】 制造高端电子产品是非常复杂精密的过程。制作用于演示或原型的一次性样品可能具有挑战性&#xff0c;但真正的挑战在于如何以盈利的方式持续生产。 这就是Samtec风险投资研发工程总监Aaron Tucker在一次关于生产高密度微小型连接器的挑战的演讲中所强调的观点。…
阅读更多...
RabbitMQ的部署

RabbitMQ的部署

一、前言 演示的为RabbitMQ的单机部署&#xff0c;在Centos7虚拟机中使用Docker来安装&#xff0c;需要掌握相应的docker命令 二、下载镜像 启动Docker: systemctl start docker 在线拉取&#xff1a;docker pull docker pull rabbitmq:3-management 三、安装MQ 运行容器&…
阅读更多...
IO-LiNK简介

IO-LiNK简介

什么是IO-Link&#xff1f; IO-Link&#xff08; IEC 61131-9 &#xff09;是一种开放式标准串行通信协议&#xff0c;允许支持 IO-Link 的传感器、设备进行双向数据交换&#xff0c;并连接到主站。 IO-Link 主站可以通过各种网络&#xff0c;如现场总线进行传输。每个 IO-L…
阅读更多...
热门开源项目vuetify框架推荐

热门开源项目vuetify框架推荐

热门开源项目推荐 Vuetify是Vue.js的一个语义化组件框架&#xff0c;旨在提供整洁、语义化和可重用的组件&#xff0c;使得构建Vue.js应用程序更加便捷。以下是关于Vuetify的使用方法的简要概述&#xff1a; 1. Vuetify的特点 语义化&#xff1a;Vuetify充分利用Vue.js的功能…
阅读更多...
【JavaEE】Spring Boot MyBatis详解(二)

【JavaEE】Spring Boot MyBatis详解(二)

一.解决数据库字段名和对象属性名冲突的问题. 产生这个问题的本质原因就是Java 属性名和数据库字段的命名规范不同. 这个问题的本质就是查询数据库返回了字段,但是不知道和Java对象的哪个属性相对应 1.注解的解决方法 注解的解决方式有三种: 方式一:给数据库字段起别名. 本质…
阅读更多...
kubesphere踩过的坑，持续更新....

kubesphere踩过的坑，持续更新....

踩过的坑 The connection to the server lb.kubesphere.local:6443 was refused - did you specify the right host… 另一篇文档中 dashboard 安装 需要在浏览器中输入thisisunsafe,即可进入登录页面 ingress 安装的问题 问题描述&#xff1a; 安装后通过命令 kubectl g…
阅读更多...
电脑上使用备忘录怎么查看编辑时间？能显示时间的备忘录

电脑上使用备忘录怎么查看编辑时间？能显示时间的备忘录

在快节奏的生活中&#xff0c;很多人喜欢使用备忘录来记录日常事项和重要信息。备忘录不仅能帮助我们捕捉灵感&#xff0c;还能确保重要任务不被遗漏。然而&#xff0c;有时候我们需要知道某条记录的编辑时间&#xff0c;以便于回溯和整理信息。如果备忘录不能显示编辑时间&…
阅读更多...
JavaEE进阶----SpringBoot快速入门

JavaEE进阶----SpringBoot快速入门

文章目录 前言一、了解Maven1.1 Maven功能- 项⽬构建- 管理依赖 1.2Maven仓库 二、第一个SpringBoot项目总结 前言 Spring Boot是一个用于构建快速、简单和可扩展的生产级应用程序的框架。它基于Spring框架&#xff0c;提供了开发微服务和独立的应用程序所需的一切。 一、了解…
阅读更多...
逆旅热闹如花盛放

逆旅热闹如花盛放

热闹 未及十五&#xff0c;月亮的清辉已可穿透厚厚的云层铺撒人间。 几颗星星点缀着夜空&#xff0c;偶尔一架飞机闪烁着光芒。 很难得的晴夜。 近两个月以来的雨&#xff0c;像电影上的蒙太奇画帧&#xff0c;一幕接一幕&#xff0c;只是单调的灰色&#xff0c;困乏人心。 …
阅读更多...
1994年美国人口普查数据 分类预测与集成学习

1994年美国人口普查数据 分类预测与集成学习

对于分类预测学习任务&#xff0c;从指定的数据源读取数据&#xff0c;对数据进行必要的处理&#xff0c;选取合适的特征&#xff0c;构造分类模型&#xff0c;确定一个人的年收入是否超过50K。 数据来源&#xff1a;1994年美国人口普查数据库。数据存放在data目录中&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023