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);//true

int 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_code
    console.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();

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[Ansible详解]

[Ansible详解]

Ansible 1.主机组清单设置 #组 #父组与子组[组名] [组名]ip ipip ip[组名 : vars] [组名2]ansible_user=用户 …
阅读更多...
如何在linux中下载R或者更新R

如何在linux中下载R或者更新R

一、问题阐述 package ‘Seurat’ was built under R version 4.3.3Loading required package: SeuratObject Error: This is R 4.0.4, package ‘SeuratObject’ needs > 4.1.0 当你在rstudio中出现这样的报错时&#xff0c;意味着你需要更新你的R 的版本了。 二、解决方…
阅读更多...
【机器学习】与【深度学习】的前沿探索——【GPT-4】的创新应用

【机器学习】与【深度学习】的前沿探索——【GPT-4】的创新应用

gpt4o年费&#xff1a;一年600&#xff0c; 友友们&#xff0c;一起拼单呀&#xff0c;两人就是300&#xff0c;三个人就是200&#xff0c;以此类推&#xff0c; 我已经开通年费gpt4o&#xff0c;开通时长是 从2024年6月20日到2025年7月16日 有没有一起的呀&#xff0c;有需要的…
阅读更多...
在SQL中使用explode函数展开数组的详细指南

在SQL中使用explode函数展开数组的详细指南

目录 简介示例1&#xff1a;简单数组展开示例2&#xff1a;展开嵌套数组示例3&#xff1a;与其他函数结合使用处理结构体数组示例&#xff1a;展开包含结构体的数组示例2&#xff1a;展开嵌套结构体数组 总结 简介 在处理SQL中的数组数据时&#xff0c;explode函数非常有用。它…
阅读更多...
VScode中js关闭烦人的ts检查

VScode中js关闭烦人的ts检查

类似如下的代码在vscode 会报错&#xff0c;我们可以在前面添加忽略检查或者错误&#xff0c;如下&#xff1a; 但是&#xff01;&#xff01;&#xff01;这太不优雅了&#xff01;&#xff01;&#xff01;&#xff0c;js代码命名没有问题&#xff0c;错在ts上面&#xff0c;…
阅读更多...
window安装miniconda

window安装miniconda

下载 https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/ 安装 双击安装 配置环境变量 添加&#xff1a;PYTHONUSERBASE你的安装路径 添加Path&#xff1a; cmd执行&#xff1a; python -m site将USER_SITE添加进Path 还需要将如下添加进环境变量 D:\Miniconda…
阅读更多...
C++学习/复习16---优先级队列/仿函数/反向迭代器

C++学习/复习16---优先级队列/仿函数/反向迭代器

一、优先队列与堆 1.1概念 1.2第k个元素 仿函数&#xff1a; **仿函数&#xff08;Functor&#xff09;是一种通过重载operator()运算符的类或结构体&#xff0c;调用使得对象可以像函数一样被**。在C编程中&#xff0c;仿函数不仅增添了编程的灵活性和功能的强大性&#xff…
阅读更多...
【TIM输出比较】

【TIM输出比较】

TIM输出比较 1.简介1.1.输出比较功能1.2.PWM 2.输出比较通道2.1.结构原理图2.2.模式分类 3.输出PWM波形及参数计算4.案例所需外设4.1.案例4.2.舵机4.3.直流单机 链接: 15-TIM输出比较 1.简介 1.1.输出比较功能 输出比较&#xff0c;英文全称Output Compare&#xff0c;简称O…
阅读更多...
Linux守护进程简介、创建流程、关闭和实例演示

Linux守护进程简介、创建流程、关闭和实例演示

1、什么是守护进程&#xff1f; 守护进程是一个后台运行的进程&#xff0c;是随着系统的启动而启动&#xff0c;随着系统的终止而终止&#xff0c;类似于windows上的各种服务&#xff0c;比如ubuntu上的ssh服务&#xff0c;网络管理服务等都是守护进程。 2、守护进程的创建流…
阅读更多...
基于ysoserial的深度利用研究（命令回显与内存马）

基于ysoserial的深度利用研究（命令回显与内存马）

0x01 前言 很多小伙伴做反序列化漏洞的研究都是以命令执行为目标&#xff0c;本地测试最喜欢的就是弹计算器&#xff0c;但没有对反序列化漏洞进行深入研究&#xff0c;例如如何回显命令执行的结果&#xff0c;如何加载内存马。 遇到了一个实际环境中的反序列化漏洞&#xff…
阅读更多...
数据集MNIST手写体识别 pyqt5+Pytorch/TensorFlow

数据集MNIST手写体识别 pyqt5+Pytorch/TensorFlow

GitHub - LINHYYY/Real-time-handwritten-digit-recognition: VGG16和PyQt5的实时手写数字识别/Real-time handwritten digit recognition for VGG16 and PyQt5 pyqt5Pytorch内容已进行开源&#xff0c;链接如上&#xff0c;请遵守开源协议维护开源环境&#xff0c;如果觉得内…
阅读更多...
每日复盘-202406020

每日复盘-202406020

今日关注&#xff1a; 20240620 六日涨幅最大: ------1--------300462--------- 华铭智能 五日涨幅最大: ------1--------300462--------- 华铭智能 四日涨幅最大: ------1--------300462--------- 华铭智能 三日涨幅最大: ------1--------300462--------- 华铭智能 二日涨幅最…
阅读更多...
javaWeb项目-ssm+vue企业台账管理平台功能介绍

javaWeb项目-ssm+vue企业台账管理平台功能介绍

本项目源码&#xff1a;javaweb项目ssm-vue企业台账管理平台源码-说明文档资源-CSDN文库 项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboo…
阅读更多...
代码随想录训练营Day 63|力扣42. 接雨水、84.柱状图中最大的矩形

代码随想录训练营Day 63|力扣42. 接雨水、84.柱状图中最大的矩形

1.接雨水 代码随想录 代码&#xff1a;(单调栈) class Solution { public:int trap(vector<int>& height) {int result 0;stack<int> st;st.push(0);for(int i 1; i < height.size(); i){if(height[i] < height[st.top()]){st.push(i);}else if(heigh…
阅读更多...
【02】区块链技术应用

【02】区块链技术应用

区块链在金融、能源、医疗、贸易、支付结算、证券等众多领域有着广泛的应用&#xff0c;但是金融依旧是区块链最大且最为重要的应用领域。 1. 区块链技术在金融领域的应用 1.2 概况 自2019年以来&#xff0c;国家互联网信息办公室已发布八批境内区块链信息服务案例清单&#…
阅读更多...
IT人周末兼职跑外面三个月心得分享

IT人周末兼职跑外面三个月心得分享

IT人周末兼职跑外面三个月心得分享 这四个月来&#xff0c;利用周末的时间兼职跑外面&#xff0c;总共完成了564单&#xff0c;跑了1252公里&#xff0c;等级也到了荣耀1&#xff0c;周末不跑就会减分。虽然收入只有3507.4元。 - 每一次的接单&#xff0c;每一段路程&#xff…
阅读更多...
8.12 矢量图层面要素单一符号使用四(线符号填充)

8.12 矢量图层面要素单一符号使用四(线符号填充)

文章目录 前言线符号填充&#xff08;Line pattern fill&#xff09;QGis设置面符号为线符号填充&#xff08;Line pattern fill&#xff09;二次开发代码实现线符号填充&#xff08;Line pattern fill&#xff09; 总结 前言 本章介绍矢量图层线要素单一符号中使用线符号填充…
阅读更多...
Day 44 Ansible自动化运维

Day 44 Ansible自动化运维

Ansible自动化运维 几种常用运维工具比较 ​ Puppet ​ —基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱ruby ​ SaltStack ​ —基于 Python 开发,采用 C/S 架构,相对 puppet 更轻量级,配置语法使用 YAML,使得配置脚本更简单 ​ Ansible ​ —基于 …
阅读更多...
基于MATLAB的误码率与信噪比（附完整代码与分析）

基于MATLAB的误码率与信噪比（附完整代码与分析）

目录 一. 写在前面 二. 如何计算误码率 三. 带噪声的误码率分析 3.1 代码思路 3.2 MATLAB源代码及分析 四. 总结 4.1 输入参数 4.2 规定比特长度 4.3 特殊形式比较 一. 写在前面 &#xff08;1&#xff09;本文章主要讨论如何仿真误码率随着信噪比变化的图像 &#…
阅读更多...
Hi3861 OpenHarmony嵌入式应用入门--0.96寸液晶屏 iic驱动ssd1306

Hi3861 OpenHarmony嵌入式应用入门--0.96寸液晶屏 iic驱动ssd1306

使用iic驱动ssd1306&#xff0c;代码来源hihope\hispark_pegasus\demo\12_ssd1306 本样例提供了一个HarmonyOS IoT硬件接口的SSD1306 OLED屏驱动库&#xff0c;其功能如下&#xff1a; 内置了128*64 bit的内存缓冲区&#xff0c;支持全屏刷新;优化了屏幕刷新速率&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023