JavaWeb之JSON、AJAX

已于 2024-07-05 11:20:33 修改
阅读量985 收藏 17
点赞数 21
分类专栏： JavaWeb 文章标签： json ajax 前端
于 2024-06-20 17:54:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70314704/article/details/139839492
版权

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();
拖把湛屎，戳谁谁死
关注
  • 21
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb之JSON和AJAX
qq_46130027的博客
01-26 557
json是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分割，多组键值对之间使用逗号进行分隔。AJAX即“Asynchronous Javascript And XML" (异步JavaScript和XML)，是指一种交互式网页应用的网页开发技术。ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。Ajax请求的局部更新，浏览器地址栏不会发生变化局部更新不会舍弃原来页面的内容java web零基础入门。
JavaWeb之Ajax&JSON
weixin_42284219的博客
10-16 229
文章目录一、AJAX1.概念2.实现方式2.1.原生的JS实现方式（了解）2.2.JQeury实现方式2.2.1.`$.ajax()`2.2.2.`$.get()`：发送get请求2.2.3.`$.post()`：发送post请求二、JSON 一、AJAX 1.概念 概念： ASynchronous JavaScript And XML异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服
java学习笔记——javaweb之JSON 、Ajax
qq_25106373的博客
07-31 2473
1、JSON 1.1、什么是JSON JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，...
Javaweb之AJAX axios JSON
lpblog的博客
03-12 551
AJAX我们先来说概念中的JavaScript和XMLJavaScript表明该技术和前端相关；XML是指以此进行数据交换。而这两个我们之前都学习过。
Javaweb项目ajax请求Json实例
03-31
此项目实例"Javaweb项目ajax请求Json实例"旨在演示如何将服务器端的数据以JSON（JavaScript Object Notation）格式发送到客户端，并在JSP页面上进行解析和展示。JSON是一种轻量级的数据交换格式，因其简洁性和易读性...
13_JavaWeb——AJAX配套资源
05-02
此资源与我的博客13_JavaWeb——AJAX中的两个案例对应，其中Demo5使用AJAX异步处理页面实现对用户输入的实时校验，Demo6使用Axios+JSON完成对品牌列表的展示和添加，取代了先前的JSP。希望有所帮助
JavaWeb通过ajax、json实现省市二级联动
04-09
总的来说，JavaWeb通过AJAX和JSON实现省市二级联动，涉及了前端的JavaScript技术、后端的JavaServlet处理和数据库操作。这一过程体现了前后端分离的思想，提高了页面的交互性和响应速度。理解并掌握这些技术，对于...
Ajax JavaWeb JS 三级联动
05-07
在Web开发中，"Ajax JavaWeb JS 三级联动"是一个常见的功能需求，它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单，通常用于地区选择、商品分类等场景，用户...
ajax_javaweb_
10-02
**Ajax技术详解与JavaWeb应用** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...
鸿蒙 LazyForEach 踩坑
熊佳龙的博客
07-19 178
ArkTS LazyForEach列表不显示
FastAPI 学习之路（五十九）封装统一的json返回处理工具
mr~li的博客
07-18 410
在本篇文章之前的接口，我们每个接口异常返回的数据格式都不一样，处理起来也没有那么方便，因此我们可以封装一个统一的json。改造后，我们的返回消息，可以自定义code，message，data。接下来我们再次改造下我们的新建用户的接口。把代码统一放到common下面的json_tools.py里面，我们在接口返回的时候调用。这样我们就完成了统一接口响应处理，后续我们可以在所有的接口中使用。我们看下修改后的用户返回。我们看下处理后的效果。我们看创建重复的返回。
controller层-请求格式为json-请求方法为get
weixin_51482243的博客
07-22 143
请求参数是json格式所以不能用name=value，用@requestbody注解，返回结果更改为getinfo success。请求过程：用户请求--初始化DispatcherServlet及对接和分发用户请求--controller--service。get请求映射，内容和PostMapping一致，需要请求参数更换为get数据。mapping为get，请求接口更改，consumes需要更改调用内容，用户请求：http://ip:port/user/getinfo。请求数据：{"userid":1}
Jmeter性能测试(九)
weixin_54542209的博客
07-19 840
性能测试
dou dian滑块captchaBody
weixin_54573778的博客
07-21 305
captchaBody、抖店、python，java，go
了解 JSON Web 令牌 (JWT)
技术探索驿站
07-18 688
在现代 Web 开发领域，确保客户端和服务器之间的通信安全至关重要。JSON Web Tokens (JWT) 已成为确保安全高效数据交换的流行解决方案。本文将深入探讨 JWT 是什么、它们的工作原理以及它们为何对于 Web 应用程序中的安全身份验证和授权至关重要。JSON Web Token (JWT) 是一种紧凑且 URL 安全的表示双方之间传输声明的方式。
人大金仓数据库KingbaseES 中JSON数据提取
m0_69423937的博客
07-20 116
【代码】人大金仓数据库KingbaseES 中JSON数据提取。
vite + vue3 + uniapp 项目从零搭建
qq_33365152的博客
07-18 939
vite + vue3 + uniapp 项目从零搭建、uniapp、微信小程序
深入探究 Golang 反射：功能与原理及应用
最新发布
dsgdauigfs的博客
07-22 746
Go 出于通用性的考量，提供了反射这一功能。借助反射功能，我们可以实现通用性更强的函数，传入任意的参数，在函数内通过反射动态调用参数对象的方法并访问它的属性。举例来说，下面的bridge接口为了支持灵活调用任意函数，在运行时根据传入参数funcPtr，通过反射动态调用funcPtr指向的具体函数。再如，ORM框架函数为了支持处理任意参数对象，在运行时根据传入的参数，通过反射动态对参数对象赋值。本文将深入探讨Golang反射包reflect的功能和原理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拖把湛屎，戳谁谁死

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值