当前位置： 首页 > news >正文

JSON、Ajax

news 2025/9/15 5:11:07

目录

  • 一、JSON
    • 1、JSON定义
    • 2、JSON数据格式
  • 二、Ajax
    • 1、什么是Ajax
    • 2、什么是同步，什么是异步
  • 三、JSON数据和Java对象的相互转换
  • 四、练习
    • 1、登录
    • 2、省市区三级联动

一、JSON

1、JSON定义

定义：是一种轻量级的数据交换格式
JSON是JavaScript Object Notation缩写
特点：
1.易于程序员阅读和编写。
2.易于计算机解析和生成。
3.其实是javascript的子集：原生javascript支持JSON

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var student = {name: 'zhansgan',age: 23,study: function() {console.log(this.name + '的年龄是' + this.age + '岁');}};console.log(student.name);student.study();</script>
</head>
<body>
</body>
</html>

在这里插入图片描述
JSON是一种与语言无关的数据交换的格式，作用：
1、使用ajax进行前后台数据交换
2、移动端与服务端的数据交换

2、JSON数据格式

JSON的语法规则十分简单，可称得上“优雅完美”，总结起来有：

JSON有两种结构：
1、对象格式：{“key1”：obj1, “key2”:obj2, “key3”:obj3…}
2、数组/集合格式: [obj1,obj2,obj3…]
注意：JSON的key是字符串，JSON的value是任意类型
元素值可具有的类型：string, number, object, array, true, false, null

1、对象(Object)用大括号({})表示
Student：

{"id" : 12,"name" : "java1711","age" : 20,"gender" : "男"
}

2、数组（Array）用方括号([])表示:
List: [{},{},{}]

[{"id" : 12,"name" : "java1711","age" : 20,"gender" : "男"},{"id" : 13,"name" : "java1712","age" : 21,"gender" : "女"}
]

二、Ajax

1、什么是Ajax

Ajax: asynchronous javascript and xml (异步js和xml)
synchronized: 同步
其是可以与服务器进行(异步/同步)交互的技术之一
Ajax的语言载体是JavaScript
最大特点：异步请求，不刷新整个页面，只刷新局部也叫局部刷新。

2、什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

易懂的理解：
1.同步请求：你现在传输，我要亲眼看着你传输完成，我才去做别的事。
2.异步请求：你传输吧，我去做我的事了，你传输完了告诉我一声。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html>
<head><title>Title</title>
</head>
<body><button onclick="ajaxGet()">ajax get</button><button onclick="ajaxPost()">ajax post</button><button onclick="ajax()">ajax</button><script src="/static/jquery-2.1.4.js"></script><script>function ajaxGet(){//$.get(url, [data], [callback], [type])  后面三个是可选的可以没有//url为前台往后台发送的请求地址//data为前台往后台发送的数据//callback为回调函数//type为后台希望返回的数据类型$.get("/ajax1",{'name': "张三1"},function (jsonObj) {console.log(jsonObj);//打印数据为{name: '李四1', age: 23}//通过打印数据可知这里的jsonObj其实已经转换为了js对象(name没有加引号)},'json');}function ajaxPost(){$.post(//$.post(url, [data], [callback], [type])  后面三个是可选的可以没有"/ajax1",{'name': "张三2"},function (jsonObj){console.log(jsonObj);},'json');}function ajax(){//$.ajax( { option1:value1,option2:value2... } );    语法：$.ajax({键值对});$.ajax({async: true,//不写默认是true，发生异步请求url: '/ajax1',type: 'GET',data: {'name': '王五'},success: function (jsonObj){console.log(jsonObj);},dataType: 'json'});}</script></body>
</html>
@WebServlet("/ajax1")
public class Ajax1Servlet extends HttpServlet {//浏览器发送的get请求默认访问这个doGet@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("Ajax1Servlet.doGet");String name = req.getParameter("name");System.out.println(name);//转义：转换你原来的意思// {"name": "李四","age":23}resp.setContentType("text/html;charset=UTF-8");resp.getWriter().write("{\"name\": \"李四\",\"age\":23}");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("Ajax1Servlet.doPost");String name = req.getParameter("name");System.out.println(name);try {Thread.sleep(3000);} catch (InterruptedException e) {throw new RuntimeException(e);}//转义：转换你原来的意思// {"name": "李四","age":23}resp.setContentType("text/html;charset=UTF-8");resp.getWriter().write("{\"name\": \"李四2\",\"age\":24}");}
}

三、JSON数据和Java对象的相互转换

常见的JSON解析器：Jsonlib，Gson，fastjson，jackson(SpringMVC内置的解析器)

1、导入jackson的相关jar包
2、创建Jackson核心对象 ObjectMapper
3、调用ObjectMapper的相关方法进行转换
3.1、JSON转为Java对象
readValue(json字符串数据,Class)
3.2、Java对象转换JSON
writeValueAsString(obj):将对象转为json字符串

public class Person {private Integer id;private String name;@JsonIgnoreprivate Integer age;private String gender;@JsonFormat(pattern = "yyyy-MM-dd")private Date birthday; // java.util.Date
}    public class JSONTest {//Java对象转为JSON字符串@Testpublic void test1() throws JsonProcessingException {//1、创建Person对象Person person = new Person();person.setId(2);person.setName("张三");person.setAge(23);person.setGender("男");person.setBirthday(new Date());//2、创建Jackson核心对象 ObjectMapperObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(person);//{"id":2,"name":"张三","gender":"男","birthday":"2025-03-08"}System.out.println(json);}//演示 JSON字符串转为Java对象@Testpublic void test3() throws IOException {// 1、创建一个json字符串// String json = "{"id":2,"name":"张三","gender":"男","birthday":"2025-03-08"}";//转义String json = "{\"id\":2,\"name\":\"张三\",\"gender\":\"男\",\"birthday\":\"2025-03-08\"}";//2、创建ObjectMapperObjectMapper mapper = new ObjectMapper();//3、json字符串转换为java对象Person person = mapper.readValue(json, Person.class);//Person{id=2, name='张三', age=null, gender='男', birthday=Sat Mar 08 08:00:00 CST 2025}System.out.println(person);}
}

四、练习

1、登录

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body><form>用户名<input type="text" name="name" id="nameId"><span id="nameSpanId"></span><br>密码<input type="text" name="password" id="passwordId"><br><input type="submit" value="注册"></form><script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script><script>//页面加载完再执行的function$(function () {$('#nameId').blur(function (){//this为当前失去焦点的输入框，为JSDOM对象$.post('/ajax2',//{'name' : this.value()},{'name' : $(this).val()},function (jsonObj){console.log(jsonObj);//{exist: true, msg: '此用户已经存在，请更换一个'}//{exist: false, msg: '该用户可用'}if (jsonObj.exist){$('#nameSpanId').html(jsonObj.msg);$('#nameSpanId').css('color','red');}else {$('#nameSpanId').html(jsonObj.msg);$('#nameSpanId').css('color','green');}},'json')})})</script>
</body>
</html>
package com.easy.web.servlet;import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;@WebServlet("/ajax2")
public class Ajax2Servlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("Ajax2Servlet.service");String name = req.getParameter("name");System.out.println(name);//用map保存exist、msg信息Map<String,Object> map = new HashMap<>();//先不连接数据库，简单认为tom为已存在的用户//{exist: true, msg: '此用户已经存在，请更换一个'}//{exist: false, msg: '该用户可用'}if ("tom".equalsIgnoreCase(name)){map.put("exist",true);map.put("msg","此用户已经存在，请更换一个");}else {map.put("exist",false);map.put("msg","该用户可用");}resp.setContentType("text/html;charset=UTF-8");//创建Jackson核心对象 ObjectMapper//调用ObjectMapper的相关方法进行json数据格式和java对象的转换ObjectMapper objectMapper = new ObjectMapper();//将java对象转换为json格式objectMapper.writeValue(resp.getWriter(),map);}
}

2、省市区三级联动

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>省份：<select id="provinceId"><option>---请选择省份--</option></select>城市：<select id="cityId"><option>---请选择城市--</option></select>区县：<select id="areaId"><option>---请选择区县--</option></select><script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script><script>$(function () {$.post("/ajax3?method=selectProvince",function (jsonObj) {//遍历province作为option追加到provinceId中//jsonObj: [{id: 220000, name: '吉林省'},{id: 230000, name: '黑龙江省'}] jsonObj为集合对象console.log(jsonObj);$(jsonObj).each(function () {//this {id: 220000, name: '吉林省'}//当 <option> 标签所在的 <select> 表单被提交时，服务器接收到的是选中项的 value 属性值，而不是标签中间的文本内容//如果未设置 value 属性，浏览器会默认将标签内的文本内容作为提交值$('#provinceId').append('<option value="'+this.id+'">'+this.name+'</option>')})},'json')$('#provinceId').change(function () {//this为JSDOM对象$.post("/ajax3?method=selectCity",{"provinceId":$(this).val()},function (jsonObj) {console.log(jsonObj);//清除上一次追加的option//选中cityId下的option，“：”为筛选的意思$('#cityId option:gt(0)').remove();//$('#cityId option:not(:first)').remove();$(jsonObj).each(function () {$('#cityId').append('<option value="'+this.id+'">'+this.name+'</option>')})},'json')})$('#cityId').change(function () {//this为JSDOM对象$.post("/ajax3?method=selectArea",{"cityId":$(this).val()},function (jsonObj) {console.log(jsonObj);//清除上一次追加的option//选中cityId下的option，“：”为筛选的意思$('#areaId option:gt(0)').remove();//$('#cityId option:not(:first)').remove();$(jsonObj).each(function () {$('#areaId').append('<option value="'+this.id+'">'+this.name+'</option>')})},'json')})})</script>
</body>
</html>
package com.easy.web.servlet;import com.easy.web.pojo.Area;
import com.easy.web.pojo.City;
import com.easy.web.pojo.Province;
import com.easy.web.util.JDBCUtil;
import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;@WebServlet("/ajax3")
public class Ajax3Servlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("Ajax3Servlet.service");String method = req.getParameter("method");switch (method){case "selectProvince":selectProvince(req,resp);break;case "selectCity":selectCity(req,resp);break;case "selectArea":selectArea(req,resp);break;}}private void selectArea(HttpServletRequest req, HttpServletResponse resp) throws IOException {System.out.println("Ajax3Servlet.selectArea");String cityId = req.getParameter("cityId");Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;List<Area> list = new ArrayList<>();try {connection = JDBCUtil.getConnection();String sql = "select id,name from tm_area where city_id=?";statement = connection.prepareStatement(sql);statement.setInt(1, Integer.parseInt(cityId));System.out.println(statement);resultSet = statement.executeQuery();while (resultSet.next()) {int id = resultSet.getInt("id");String name = resultSet.getString("name");Area area = new Area(id,name);list.add(area);}} catch (SQLException e) {throw new RuntimeException(e);}resp.setContentType("text/html;charset=UTF-8");ObjectMapper mapper = new ObjectMapper();mapper.writeValue(resp.getWriter(), list);}private void selectCity(HttpServletRequest req, HttpServletResponse resp) throws IOException {System.out.println("Ajax3Servlet.selectCity");String provinceId = req.getParameter("provinceId");Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;List<City> list = new ArrayList<>();try {connection = JDBCUtil.getConnection();String sql = "select id,name from tm_city where province_id=?";statement = connection.prepareStatement(sql);statement.setInt(1, Integer.parseInt(provinceId));System.out.println(statement);resultSet = statement.executeQuery();while (resultSet.next()) {int id = resultSet.getInt("id");String name = resultSet.getString("name");City city = new City(id, name);list.add(city);}} catch (SQLException e) {throw new RuntimeException(e);}resp.setContentType("text/html;charset=UTF-8");ObjectMapper mapper = new ObjectMapper();mapper.writeValue(resp.getWriter(), list);}private void selectProvince(HttpServletRequest req, HttpServletResponse resp) throws IOException {System.out.println("Ajax3Servlet.selectProvince");Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;List<Province> list = new ArrayList<>();try {connection = JDBCUtil.getConnection();String sql = "select id,name from tm_province";statement = connection.prepareStatement(sql);System.out.println(statement);resultSet = statement.executeQuery();while (resultSet.next()) {int id = resultSet.getInt("id");String name = resultSet.getString("name");Province province = new Province(id, name);list.add(province);}} catch (SQLException e) {throw new RuntimeException(e);}//与Ajax2Servlet同样的操作resp.setContentType("text/html;charset=UTF-8");ObjectMapper mapper = new ObjectMapper();mapper.writeValue(resp.getWriter(), list);}
}

文章转载自：

http://ZDOxkSdu.wgkqq.cn
http://owvA2xJz.wgkqq.cn
http://NyMWnoDa.wgkqq.cn
http://kPFxvpYl.wgkqq.cn
http://iFLCjIq9.wgkqq.cn
http://7Sw306ri.wgkqq.cn
http://1auxVFNc.wgkqq.cn
http://cFi5Ts9l.wgkqq.cn
http://ImgHHIP1.wgkqq.cn
http://haw38RzJ.wgkqq.cn
http://E1SRc64U.wgkqq.cn
http://8KZOoHN1.wgkqq.cn
http://hKqA9W9l.wgkqq.cn
http://YStS0id6.wgkqq.cn
http://RDcOhsHl.wgkqq.cn
http://mekaxF78.wgkqq.cn
http://1wAWXgoq.wgkqq.cn
http://9hcvVKeM.wgkqq.cn
http://dHVR4FjG.wgkqq.cn
http://1miUbjOr.wgkqq.cn
http://Y0js6lz4.wgkqq.cn
http://WI6uAZ03.wgkqq.cn
http://koQHVYcP.wgkqq.cn
http://kDgz3il9.wgkqq.cn
http://O41QjG08.wgkqq.cn
http://0gewISGB.wgkqq.cn
http://kCzu5g3e.wgkqq.cn
http://asbFPSK6.wgkqq.cn
http://D6uA6eLU.wgkqq.cn
http://U4P0thvS.wgkqq.cn
http://www.dtcms.com/a/382751.html

相关文章：

  • 第2课：Agent系统架构与设计模式
  • Python上下文管理器进阶指南：不仅仅是with语句
  • Entities - Entity 的创建模式
  • 用html5写王者荣耀之王者坟墓的游戏2deepseek版
  • 【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
  • godot+c#使用godot-sqlite连接数据库
  • 【pure-admin】pureadmin的登录对接后端
  • tcpump | 深入探索网络抓包工具
  • scikit-learn 分层聚类算法详解
  • Kafka面试精讲 Day 18：磁盘IO与网络优化
  • javaweb CSS
  • css`min()` 、`max()`、 `clamp()`
  • 超越平面交互：SLAM技术如何驱动MR迈向空间计算时代？诠视科技以算法引领变革
  • Win11桌面的word文件以及PPT文件变为白色，但是可以正常打开，如何修复
  • 【系统架构设计（31）】操作系统下：存储、设备与文件管理
  • Flask学习笔记(三)--URL构建与模板的使用
  • 基于单片机的电子抢答器设计（论文+源码）
  • TCP与UDP
  • 【WebSocket✨】入门之旅（六）：WebSocket 与其他实时通信技术的对比
  • 华为防火墙隧道配置
  • 使用 Matplotlib 让排序算法动起来：可视化算法执行过程的技术详解
  • 【C++深学日志】C++编程利器：缺省参数、函数重载、引用详解
  • 晶体管：从基础原理、发展历程到前沿应用与未来趋势的深度剖析
  • CentOS7 安装 Jumpserver 3.10.15
  • jquery 文件上传 （CVE-2018-9207）漏洞复现
  • QML Charts组件之折线图的鼠标交互
  • 工程机械健康管理物联网系统：AIoT技术赋能装备全生命周期智能运维​
  • 第5课：上下文管理与状态持久化
  • SpringBootCodeGenerator使用JSqlParser解析DDL CREATE SQL 语句
  • 【WebSocket✨】入门之旅（五）：WebSocket 的安全性