Java研学-JSON与AJAX

2024-03-21 23:36
文章标签 java json ajax 研学

本文主要是介绍Java研学-JSON与AJAX，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一 JSON

1 定义

  JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript （欧洲计算机协会制定的 JS 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2 格式

  JSON 就是一种有格式的字符串。任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

规则如下:
- 映射用冒号（“:”）表示。”名称” : 值，标准格式名称用双引号括起来；
- 并列的数据之间用逗号（“,”）分隔。”名称1” : 值1, ”名称2” : 值2；
- 映射的集合（对象）用大括号（“{}”）表示。{”名称1” : 值1, ”名称2”: 值2}
- 并列数据的集合（数组）用方括号(“[]”)表示。示例如下：[{”名称1” : 值, ”名称2” : 值2},{”名称1” : 值, ”名称2” : 值2}]
- 元素值可具有的类型：string，number，object，array，true，false，null。

3 JavaScript 中的 JSON

 ① 表示 JSON

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>json语法</title>
</head>
<body><script>//json字符串var json01="\"name\":lisi";console.log(json01)//json对象var json02={"name":"lisi","age":23};console.log(json02)//json数组var json03=[{"name":"lisi","age":23},{"name":"zhangsan","age":23}];console.log(json03)</script>
</body>
</html>

 ② JSON 与 JS 对象转换
  浏览器环境提供一个工具类名叫JSON，里面提供方法帮我们实现 JSON 与 JS 对象之间的转换。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>json语法</title>
</head>
<body><script>/** json对象转字符串：* JSON.stringify()* json字符转转对象：* JSON.parse()* *///json对象var jsonObj={"name":"lisi","age":23};var str=  JSON.stringify(jsonObj);console.log(str)//json对象字符串var jsonStr="{\"name\":\"lisi\",\"age\":23}";var obj = JSON.parse(jsonStr);console.log(obj)</script>
</body>
</html>

二 Java 中的 JSON

1 表示 JSON

  新建一个测试类于 Java 中表示 JSON

package cn.tj.json;
public class JsonTest {/*json格式*/@Testpublic void json_str() {/*基本json数据:* {"name":"李四","age":23,*  {"dept":"开发部"}* }* */String s = "{\"name\":\"李四\",\"age\":23}";System.out.println(s);}
}

2 JSON 与 Java 对象转换

  开发中一般都会使用第三方的一些 JSON 操作的依赖或者 JAR 包来来完成 Java 对象与 JSON 字符串之间的转换，其中主要方法需通过ObjectMapper对象进行调用。在 Java 中，转换 JSON 的依赖或者 JAR 有很多，如：

- Jackson：在 Spring MVC 中内置支持(需要导入依赖才能使用)，速度也挺快，稳定性较好
- Fastjson：阿里出品，号称是 Java 领域中转换 JSON 最快的一个插件，中文文档较齐全

3 Jackson – ObjectMapper对象

 ① 添加依赖

	<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.13.5</version></dependency>

 ② 调用API

/*jackson转换测试*/@Testpublic void json_jackson() throws Exception {//创建对象：数据库查询的对象(部门对象)Department department = new Department();department.setId(1l);department.setName("开发部");department.setSn("DEV");//map对象Map<String, Object> map = new HashMap<>();map.put("dept1", department);ObjectMapper objectMapper = new ObjectMapper();//对象转字符串//{"id":1,"name":"开发部","sn":"DEV"}String jsonStr = objectMapper.writeValueAsString(department);//map转字符串//{"dept1":{"id":1,"name":"开发部","sn":"DEV"}}//String jsonStr = objectMapper.writeValueAsString(map);System.out.println(jsonStr);//字符串转对象//{"id":1,"name":"开发部","sn":"DEV"}Department department1 = objectMapper.readValue(jsonStr, Department.class);//Department(id=1, name=开发部, sn=DEV)System.out.println(department1);}

4 Fastjson – JSON（静态可直接调用）

 ① 添加依赖

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

 ② 调用API

	/*fastjson转换测试*/@Testpublic void json_fastjson() {//创建部门对象Department department = new Department();department.setId(1l);department.setName("开发部");department.setSn("DEV");//对象转字符串:{"id":1,"name":"开发部","sn":"DEV"}String jsonString = JSON.toJSONString(department);System.out.println(jsonString);//字符串转对象:Department(id=1, name=开发部, sn=DEV)Department department1 = JSON.parseObject(jsonString, Department.class);System.out.println(department1);}

三 Spring MVC 响应 JSON

1 Spring MVC 响应 JSON 步骤

1.在 pom.xml 中添加 Jackson 依赖。
2.在 mvc.xml 配置 MVC 注解解析器。(配置后才能使用@ResponseBody 注解)
3.定义一个类，里面提供对应属性封装数据。
4.在要响应 JSON 数据的控制器的处理方法上贴 @ResponseBody 注解，且方法返回类型为上面定义的类。
5.在处理方法中创建上面定义类 的对象，封装数据返回即可。

2 demo

@Controller
@RequestMapping("json")
public class JsonController {@Autowiredprivate DepartmentService departmentService ;/*根据id查询部门:返回json格式数据*/@RequestMapping("getDept")//该注解表示将返回的数据以json格式展示，并且不经过视图解析器@ResponseBodypublic Department getDept(){// 无模拟视图对象，只是返回数据，故不走视图解析器Department department = departmentService.get(3l);// 直接返回对象，页面中以json格式显示return department;}/*查询所有部门:返回json格式数据*/@RequestMapping("queryAll")//将返回的数据以json格式展示，并且不经过视图解析器@ResponseBodypublic List<Department> queryAll(){List<Department> departments = departmentService.listAll();return departments;}
}

3 JsonResult

  当接口逐渐增多，返回值的类型也会多种多样，造成开发不规范，此时应使用 JsonResult 统一返回值类型，也就是将所需数据都封装到一个对象中

package cn.tj.qo;
import lombok.Data;
@Data
public class JsonResult {//请求执行返回的状态值(执行是否成功)：true  falseprivate boolean success;private String msg;//执行结果的提示信息private Object data;//crud操作的返回值public JsonResult() {}/*增删改 一般不需要返回数据*/public JsonResult(boolean success, String msg) {this.success = success;this.msg = msg;}/*查询 需要返回数据*/public JsonResult(boolean success, String msg, Object data) {this.success = success;this.msg = msg;this.data = data;}
}

4 常量参数 – CrmConstance

  将所需字符串(操作后返回的信息)封装为常量，供 JsonResult 统一返回处理调用，便于修改

public class CrmConstance {public static  String DEPT_QUERY_SUCCESS="部门查询成功！";public static  String DEPT_QUERY_FAIL="部门查询失败！";
}

5 优化demo

@Controller
@RequestMapping("json")
public class JsonController {@Autowiredprivate DepartmentService departmentService ;/*根据id查询部门:返回json格式数据*/@RequestMapping("getDept")//将返回的数据以json格式展示，并且不经过视图解析器@ResponseBodypublic JsonResult getDept(){Department department = departmentService.get(3l);return new JsonResult(true, CrmConstance.DEPT_QUERY_SUCCESS,department);}/*查询所有部门:返回json格式数据*/@RequestMapping("queryAll")//将返回的数据以json格式展示，并且不经过视图解析器@ResponseBodypublic JsonResult queryAll(){List<Department> departments = departmentService.listAll();return new JsonResult(true,CrmConstance.DEPT_QUERY_SUCCESS,departments);}
}

四 AJAX

1 介绍

  AJAX 不是一项具体的技术，而是几门技术的综合应用。Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。是一种用于创建快速动态网页的技术。

  AJAX 核心只不过是要在 Javascript 中调用一个叫 XMLHttpRequest 类，这个类可以与 Web 服务器使用 HTTP 协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的 JavaScript 对象发送请求和接收响应。

  XMLHttpRequest 对象在网络上的俗称为 AJAX 对象。

2 特点

  浏览器中显示一个页面后，这个页面以后一直不改变，所有的操作请求都由这个网页中的 Javascript 代码发出，所有的结果都由 Javascript 代码接受并增加到这个页面上，浏览器窗口中显示的网页始终都是初始的那个网页。

  增强用户体验：可以在用户浏览网页的同时与服务器进行异步交互和实现网页内容的局部更新。

  同步和异步交互：
  同步：提交请求 —> 等待服务器处理 —> 处理完毕返回 这个期间客户端浏览器不能干任何事。同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通 讯方式。
  异步：请求通过事件触发 —> 服务器处理（这时浏览器仍然可以作其他事情）—> 处理完毕。异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通 讯方式。

3 jQuery 中 AJAX API

三个方法都能实现AJAX异步操作，get和post是ajax的简写版

// options：一个包含 AJAX 请求所需的所有设置的对象。例如，你可以设置请求的 URL、请求类型（GET 或 POST）、请求头、预期的数据类型等。
1.jQuery.ajax([options])2.jQuery.get(url, [data], [callback], [type])3.jQuery.post(url, [data], [callback], [type])// url：请求的 URL。
// data（可选）：要发送到服务器的数据。
// callback（可选）：请求成功时调用的函数。
// type（可选）：预期服务器返回的数据类型。

五 demo

1 GET 请求检查用户名是否存在

 html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax练习</title>
</head>
<body>
<!--请求结果的提示-->
<span id="result"></span><br/>
用户名:<input type="text" name="username" id="username">
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<script>//给输入框绑定一个失去焦点事件$("#username").blur(function (){//获取用户名var username = $("#username").val();//发送ajax异步请求，将页面输入的用户名发送服务器端$.get("/hello/checkName",{"username":username},function (data){// console.log(data)//服务器端返回的数据（return的数据）//根据返回值状态给出页面提示// if(data.success){//     $("#result").html(data.msg).css("color","green");// }else{//     $("#result").html(data.msg).css("color","red");// }$("#result").html(data.msg).css("color",data.success?"green":"red");},"json")})
</script>
</body>
</html>

 HelloContrller

@Controller
@RequestMapping("hello")
public class HelloContrller {/*验证用户名*/@RequestMapping("checkName")@ResponseBodypublic JsonResult checkName(String username) {/*判断输入的用户名是否可用*/if ("lisi".equals(username)) {return new JsonResult(false, "这个用户名已经存在！");} else {return new JsonResult(true, "恭喜你这个用户名可以用！");}}
}

2 POST 请求用户登录操作

 html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax练习</title>
</head>
<body>
<!--登录提示-->
<span id="result"></span><br/>
用户名:<input type="text" name="username" id="username">
密码:<input type="text" name="password" id="password">
<button id="login">登录</button>
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<script>//给登录按钮绑定提交事件$("#login").click(function (){//账户和密码var username= $("#username").val();var password= $("#password").val();//发送ajax请求，验证表单输入的账号密码是否正确$.post("/hello/checkLogin",{"username":username,"password":password},function (data){console.log(data)$("#result").html(data.msg).css("color",data.success?'green':'red');},"json")})
</script>
</body>
</html>

 HelloContrller

/*验证登录*/@RequestMapping("checkLogin")@ResponseBodypublic JsonResult checkLogin(String username, String password) {if ("admin".equals(username) && "123".equals(password)) {return new JsonResult(true, "登录成功！");} else {return new JsonResult(false, "账号或密码错误！");}}

3 二级联动

 html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax练习</title>
</head>
<body>
省份:<select id="p"><option value="-1">请选择</option>
</select>
城市:<select id="c"><option value="-1">请选择</option>
</select>
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<script>//页面加载完毕，查询展示省份下拉信息$.get("/hello/province", function (data) {//遍历省份数据$(data.data).each(function (i, item) {var s = "<option value='" + item.id + "'>" + item.name + "</option>";//将省份显示到省份的下拉框$("#p").append(s);})}, "json")//根据省份的选择 显示城市的下拉菜单$("#p").change(function () {//省份下拉框绑定内容改变事件$("#c > option").remove(":gt(0)");//先清空原来的下拉内容// $("#c").empty();//先添加请选择// $("#c").append("<option value=\"-1\">请选择</option>");//获取当前省份的idvar pid = $(this).val();// console.log(pid)if (pid != -1) {//根据省份id查询下面的城市列表?pid=7$.get("/hello/city", {"pid": pid}, function (data) {//遍历城市数组$(data.data).each(function (i, item) {var s = "<option value='" + item.id + "'>" + item.name + "</option>";//城市下拉框添加选项$("#c").append(s);})}, "json")}})
</script>
</body>
</html>

 HelloContrller

/*省份信息查询*/@RequestMapping("province")@ResponseBodypublic JsonResult province() {//查询所有省份List<Province> provinceList = Province.getAllProvince();return new JsonResult(true, "省份查询成功！", provinceList);}/*省份信息查询*/@RequestMapping("city")@ResponseBodypublic JsonResult city(Long pid) {//根据省份查询城市List<City> cityList = City.getCityByProvinceId(pid);return new JsonResult(true, "省份查询成功！", cityList);}

这篇关于Java研学-JSON与AJAX的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/834098。

相关文章

Java五子棋之坐标校正

Java五子棋之坐标校正

上篇针对了Java项目中的解构思维，在这篇内容中我们不妨从整体项目中拆解拿出一个非常重要的五子棋逻辑实现：坐标校正，我们如何使漫无目的鼠标点击变得有序化和可控化呢？ 目录 一、从鼠标监听到获取坐标 1.MouseListener和MouseAdapter 2.mousePressed方法 二、坐标校正的具体实现方法 1.关于fillOval方法 2.坐标获取 3.坐标转换 4.坐
阅读更多...
Spring Cloud：构建分布式系统的利器

Spring Cloud：构建分布式系统的利器

引言 在当今的云计算和微服务架构时代，构建高效、可靠的分布式系统成为软件开发的重要任务。Spring Cloud 提供了一套完整的解决方案，帮助开发者快速构建分布式系统中的一些常见模式（例如配置管理、服务发现、断路器等）。本文将探讨 Spring Cloud 的定义、核心组件、应用场景以及未来的发展趋势。 什么是 Spring Cloud Spring Cloud 是一个基于 Spring
阅读更多...
Javascript高级程序设计(第四版)--学习记录之变量、内存

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值：简单的数据即基础数据类型，按值访问。 引用值：由多个值构成的对象即复杂数据类型，按引用访问。 动态属性 对于引用值而言，可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J
阅读更多...
java8的新特性之一（Java Lambda表达式）

java8的新特性之一（Java Lambda表达式）

1：Java8的新特性 Lambda 表达式： 允许以更简洁的方式表示匿名函数（或称为闭包）。可以将Lambda表达式作为参数传递给方法或赋值给函数式接口类型的变量。 Stream API： 提供了一种处理集合数据的流式处理方式，支持函数式编程风格。 允许以声明性方式处理数据集合（如List、Set等）。提供了一系列操作，如map、filter、reduce等，以支持复杂的查询和转
阅读更多...
Java面试八股之怎么通过Java程序判断JVM是32位还是64位

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法： public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM
阅读更多...
详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

目录 前言1. 注解用法1.1 方法参数1.2 方法1.3 类 2. 注解场景2.1 表单参数2.2 AJAX请求2.3 文件上传 3. 实战4. 总结 前言 将请求参数绑定到模型对象上，或者在请求处理之前添加模型属性 可以在方法参数、方法或者类上使用 一般适用这几种场景： 表单处理：通过 @ModelAttribute 将表单数据绑定到模型对象上预处理逻辑：在请求处理之前
阅读更多...
eclipse运行springboot项目，找不到主类

eclipse运行springboot项目，找不到主类

解决办法尝试了很多种，下载sts压缩包行不通。最后解决办法如图： help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。
阅读更多...
JAVA读取MongoDB中的二进制图片并显示在页面上

JAVA读取MongoDB中的二进制图片并显示在页面上

1：Jsp页面： <td><img src="${ctx}/mongoImg/show"></td> 2：xml配置： <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001
阅读更多...
Java面试题：通过实例说明内连接、左外连接和右外连接的区别

Java面试题：通过实例说明内连接、左外连接和右外连接的区别

在 SQL 中，连接（JOIN）用于在多个表之间组合行。最常用的连接类型是内连接（INNER JOIN）、左外连接（LEFT OUTER JOIN）和右外连接（RIGHT OUTER JOIN）。它们的主要区别在于它们如何处理表之间的匹配和不匹配行。下面是每种连接的详细说明和示例。 表示例 假设有两个表：Customers 和 Orders。 Customers CustomerIDCus
阅读更多...
22.手绘Spring DI运行时序图

22.手绘Spring DI运行时序图

1.依赖注入发生的时间 当Spring loC容器完成了 Bean定义资源的定位、载入和解析注册以后,loC容器中已经管理类Bean 定义的相关数据，但是此时loC容器还没有对所管理的Bean进行依赖注入，依赖注入在以下两种情况 发生： 、用户第一次调用getBean()方法时，loC容器触发依赖注入。 、当用户在配置文件中将＜bean＞元素配置了 lazy-init二false属性,即让
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2