JavaWeb之JSON、AJAX

news2024/10/23 4:52:11

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();

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

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

相关文章

SpingBoot快速入门下

SpingBoot快速入门下

响应HttpServietResponse 介绍 将ResponseBody 加到Controller方法/类上 作用&#xff1a;将方法返回值直接响应&#xff0c;如果返回值是 实体对象/集合&#xff0c;将会自动转JSON格式响应 RestController Controller ResponseBody; 一般响应 统一响应 在实际开发中一般…
阅读更多...
SpringBoot | 实现邮件发送

SpringBoot | 实现邮件发送

运行环境&#xff1a; IntelliJ IDEA 2022.2.5 (Ultimate Edition) (注意&#xff1a;idea必须在2021版本以上&#xff09;JDK17 项目目录&#xff1a; 该项目分为pojo,service,controller,utils四个部分&#xff0c; 在pojo层里面写实体内容&#xff08;发邮件需要的发件人邮…
阅读更多...
浅谈配置元件之HTTP Cookie管理器

浅谈配置元件之HTTP Cookie管理器

浅谈配置元件之HTTP Cookie管理器 在进行Web测试时&#xff0c;处理Cookies是非常关键的一环&#xff0c;因为Cookies常用于存储用户会话信息、登录状态等。JMeter中的“HTTP Cookie管理器”&#xff08;HTTP Cookie Manager&#xff09;正是为此设计的配置元件&#xff0c;它…
阅读更多...
后端学习笔记：Python基础

后端学习笔记：Python基础

后端学习笔记&#xff1a;Python基础 数据类型&#xff1a; Python中主要有以下几种常用的基本数据类型&#xff1a; String 字符串类型&#xff0c;用单引号或者双引号引用Number 数字类型&#xff0c;包括浮点数&#xff0c;整数&#xff0c;长整数和复数List 列表项&…
阅读更多...
24年计算机等级考试22个常见问题解答❗

24年计算机等级考试22个常见问题解答❗

24年9月计算机等级考试即将开始&#xff0c;整理了报名中容易遇到的22个问题&#xff0c;大家对照入座&#xff0c;避免遇到了不知道怎么办&#xff1f; 1、报名条件 2、报名入口 3、考生报名之后后悔了&#xff0c;不想考了&#xff0c;能否退费&#xff1f; 4、最多能够报多少…
阅读更多...
【MySQL】（基础篇十五） —— 增删改数据

【MySQL】（基础篇十五） —— 增删改数据

增删改数据 本文介绍如何利用SQL的INSERT语句将数据插入表中。以及如何利用UPDATE和DELETE语句进一步操纵表数据。 数据插入 INSERT是用来插入&#xff08;或添加&#xff09;行到数据库表的。插入可以用几种方式使用 插入完整的行&#xff1b;插入行的一部分&#xff1b;插…
阅读更多...
目标检测技术学习

目标检测技术学习

最近公司做一个目标检测相关的项目&#xff0c;对目标检测以及相关的深度学习知识有一些了解。这里整理一下。 一、目标检测定义 什么是目标检测&#xff1f;最近还碰到一个朋友做的项目&#xff0c;是无人机目标检测的&#xff0c;很有意思&#xff08;据说还是军事用途&…
阅读更多...
SpringBoot的冬奥会科普平台 LW +PPT+源码

SpringBoot的冬奥会科普平台 LW +PPT+源码

3 平台分析 3.1 平台可行性分析 3.1.1 经济可行性 由于本平台是作为毕业设计平台&#xff0c;且平台本身存在一些技术层面的缺陷&#xff0c;并不能直接用于商业用途&#xff0c;只想要通过该平台的开发提高自身学术水平&#xff0c;不需要特定服务器等额外花费。所有创造及工…
阅读更多...
python离线安装第三方库、及其依赖库（单个安装，非批量移植）

python离线安装第三方库、及其依赖库（单个安装，非批量移植）

文章目录 1.外网下载第三方库、依赖库2.内网安装第三方库3.补充附录内网中离线安装python第三方库，这时候只能去外网手动下载第三方库，再传回内网进行安装。 问题是python第三方库往往有其前置依赖包，你很难清楚某个第三方库依赖的是哪些依赖包，更难受的是依赖包可能还有其…
阅读更多...
谷歌个人号14天封闭测试，又添新要求？怎么提高封测通过率？

谷歌个人号14天封闭测试，又添新要求？怎么提高封测通过率？

相信不少在Google Play上架应用的开发者们&#xff0c;对谷歌个人号的20人连续14天的封闭测试感到头疼。谷歌对个人号提出周期长达14天的封测要求&#xff0c;主要是希望开发者们能上架质量更好、体验感更好的app到谷歌商店。 而随着谷歌行业的发展&#xff0c;这项政策要求的执…
阅读更多...
双网卡设置路由网络不通原因之一：静态ip设置失败

双网卡设置路由网络不通原因之一：静态ip设置失败

1.主要现象&#xff1a; 外网通&#xff0c;内网不通 外网IP设置 内网IP设置 路由表设置 内网不通 2.主要原因&#xff1a;在适配器中设置的内网静态IP没有成功 设置静态IP失败 在命令行使用ipconfig命令看到内网适配器的静态IP为192.168.0.55&#xff0c;并不是我们设置的1…
阅读更多...
密码学及其应用——GMP库在密码学中的应用

密码学及其应用——GMP库在密码学中的应用

GMP&#xff08;GNU Multiple Precision arithmetic library&#xff0c;GNU多精度算术库&#xff09;是一个针对大整数运算的库。这个库提供了许多针对多种多精度类型的计算函数&#xff1a; - 大整数&#xff1a;Z - 大有理数&#xff1a;Q - 大浮点数&#xff1a;R 1. 密码学…
阅读更多...
Unity URP简单烘焙场景步骤

Unity URP简单烘焙场景步骤

Unity URP简单烘焙场景步骤 前言项目场景布置灯光模型Lighting设置环境设置烘焙前烘焙后增加角色 前言 项目中要烘焙一个3D场景&#xff0c;用的URP渲染管线&#xff0c;简单记录一下。 项目 场景布置 灯光 因为场景中有能动的东西&#xff0c;需要一部分实时光照&#xf…
阅读更多...
vuejs3+elementPlus后台管理系统，左侧菜单栏制作，跳转、默认激活菜单

vuejs3+elementPlus后台管理系统，左侧菜单栏制作，跳转、默认激活菜单

默认激活菜单,效果&#xff1a; 默认激活菜单&#xff0c;效果1&#xff1a; 默认激活菜单&#xff0c;效果2&#xff1a; 跳转链接效果&#xff1a; 制作&#xff1a; <script setup> import {useUserStore} from "/stores/userStore.js"; import {ref} fr…
阅读更多...
FKA总结

FKA总结

问题点&#xff1a; 原因分析: 工作状态下进入充电模式&#xff0c;程序检测到的电压会降低&#xff0c;比如8.07V的电池电压&#xff0c;它处于充满的临界状态&#xff0c;开机情况下程序检测的电压会降到7.98V&#xff0c;然后进入充电模式显示红灯 关机状态下进入充电模式…
阅读更多...
volatile关键字（juc编程）

volatile关键字（juc编程）

volatile关键字 3.1 看程序说结果 分析如下程序&#xff0c;说出在控制台的输出结果。 Thread的子类 public class VolatileThread extends Thread {// 定义成员变量private boolean flag false ;public boolean isFlag() { return flag;}Overridepublic void run() {// 线…
阅读更多...
数据结构与算法3---栈与队

数据结构与算法3---栈与队

一、栈 1、顺序栈 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <stdlib.h> //开辟空间#define MAXSIZE 50//顺序栈的基本算法 typedef struct {int stack[MAXSIZE];int top; }SqStack;//初始化 void InitStack(SqStack* S) {S->top …
阅读更多...
[BUUCTF从零单排] Web方向 01.Web入门篇之粗心的小李解题思路

[BUUCTF从零单排] Web方向 01.Web入门篇之粗心的小李解题思路

这是作者新开的一个专栏《BUUCTF从零单排》&#xff0c;旨在从零学习CTF知识&#xff0c;方便更多初学者了解各种类型的安全题目&#xff0c;后续分享一定程度会对不同类型的题目进行总结&#xff0c;并结合CTF书籍和真实案例实践&#xff0c;希望对您有所帮助。当然&#xff0…
阅读更多...
JEnv-for-Windows 详细使用

JEnv-for-Windows 详细使用

管理员执行jenv.bat文件 执行正常, 接下来就是按照官网的命令就行了 文件下载地址 https://download.csdn.net/download/qq_43071699/89462664 JEnv 是一个强大的Java版本管理工具&#xff0c;允许开发者在多个Java版本之间轻松切换。以下是一些常用的JEnv命令&#xff0c;这…
阅读更多...
【网络安全产品】---网闸

【网络安全产品】---网闸

了解了不少安全产品&#xff0c;但是对网闸的理解一直比较模糊&#xff0c;今天 what 网闸是安全隔离与信息交换系统的简称&#xff0c;使得在不影响数据正常通信的前提下&#xff0c;让络在不连通的情况下数据的安全交换和资源共享&#xff0c;对不同安全域/网络之间实现真正…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023