技术标签： json JavaWeb ajax javascript
目录
一、基本介绍
二、JSON格式
三、JSON的使用
1. JSON对象和JSON字符串的转换
2. JSON在java中的使用
四、Ajax的使用
1. 基本介绍
2. Ajax应用的场景
3. 使用原生的javaScript发送Ajax请求
3.1 创建XMLHttpRequest对象
3.2 向服务器发送请求
3.3 服务器响应
3.4 处理服务器响应之后的请求
4. 使用Jquery发送Ajax请求
4.1 使用$.ajax()进行Ajax请求
4.2 使用$.get()进行Ajax请求
4.3 使用$.post()进行Ajax请求
4.4 使用$.getJson()进行Ajax请求
五、总结
JSON：JavaScript对象表示法（JavaScript Object Notation）。JSON是轻量级的文本呢数据交换格式。JSON并非只服务于某一个语言，而是像java、php、go等都可以使用JSON
var 变量名 = {
"k1" : value, //Number类型
"k2" : "value", //字符串类型
"k3" : [], //数组类型
"k4" : {
}, //json对象类型
"k5" : [{
}{
}] //json数组
}
提示：
- 映射(元素/属性)用冒号 : 表示，
"名称":值。注意名称是字符串，因此要用双引号引起来并列的数据之间用逗号 , 分隔。“名称 1”:值,“名称 2”:值- 映射的集合
(对象)用大括号 {} 表示。{“名称 1”:值,“名称 2”:值}- 并列数据的集合（数组）用方括号 [] 表示。 [{“名称 1”:值,“名称 2”:值}, {“名称 1”:值," 名称 2":值}]
- 元素值类型：
string, number, object, array, true, false, null
示例：
var myJson = {
"key1": "MyJson", // 字符串
"key2": 123, // Number
"key3": [1, "hello", 2.3], // 数组
"key4": {
"age": 12, "name": "jack"}, //json 对象
"key5": [
{
"k1":10,"k2":"str"},
{
"k3":10,"k4":"str"}
] //json 数组
};
这里先简单演示一下，快速入门
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<script type="text/javascript" src="../../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var myJson = {
"key1": "myJson", // 字符串
"key2": 123, // Number
"key3": [1, "hello", 2.3], // 数组
"key4": {
"age": 12, "name": "jack"}, //json 对象
"key5": [] //json 数组
};
alert(myJson.key3);
</script>
</head>
<body>
</body>
</html>
需要用到的方法
// 将一个json对象转换为json字符串
JSON.stringfiy(json对象)
// 将一个json字符串转换为json对象
JSON.parse(jsonString)
- 这里的
JSON是一个内置对象，不需要创建。- 上面两个方法的使用，都不会影响原来的 JSON对象/json字符串，而是返回一个新的转换后的变量。
- 在定义
JSON对象的时候，可以使用单引号''表示字符串- 在将原生的字符串转换为json对象的时候，必须使用双引号
""，否则会报错。- 、
JSON.springify(json 对象)返回的字符串, 都是用双引号""表示的字符串, 所以在语法格式正确的情况下, 是可以重新转成 json 对象的。
java中使用JSON，需要引入第三方的
gson.jar包。gson是Goole提供的用来在Java对象和JSON数据之间进行映射的java类库
示例
Student对象
package com.json;
/**
* @author long
* @date 2022/9/14
*/
public class Student {
private int id;
private int age;
private String name;
public Student(int id, int age, String name) {
this.id = id;
this.age = age;
this.name = name;
}
public Student() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Student{" +
"id=" + id +
", age=" + age +
", name='" + name + '\'' +
'}';
}
}
json字符串和java对象的相互转化
package com.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
/**
* @author long
* @date 2022/9/14
*/
public class MyJson{
public static void main(String[] args) {
Student student = new Student(1, 18, "张三");
Gson gson = new Gson();
// java对象转换为json字符串
String studentStr = gson.toJson(student);
System.out.println(studentStr);
// json字符串转换为java对象
Student student1 = gson.fromJson(studentStr, Student.class);
System.out.println(student1);
}
}
json字符串和java集合的相互转换
package com.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.util.ArrayList;
import java.util.List;
/**
* @author long
* @date 2022/9/14
*/
public class MyJson{
static class StudentType extends TypeToken<List<Student>>{
}
public static void main(String[] args) {
// List集合和json的相互转换
List<Student> studentList = new ArrayList<>();
studentList.add(new Student(2,18,"李四"));
studentList.add(new Student(3,18,"王五"));
// List转换为json字符串
String listStr = gson.toJson(studentList);
System.out.println(listStr);
// json字符串转换为List（方式一）
List<Student> studentList1= gson.fromJson(listStr, new StudentType().getType());
System.out.println(studentList1);
// json字符串转换为List（方式二:匿名内部类）
List<Student> studentList2 = gson.fromJson(listStr, new TypeToken<List<Student>>() {
}.getType());
System.out.println(studentList2);
}
}
package com.json;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import java.util.HashMap;
import java.util.Map;
/**
* @author long
* @date 2022/9/14
*/
public class MyJson{
public static void main(String[] args) {
// map集合和json的相互转换
Map<String,Student> studentMap = new HashMap<>();
studentMap.put("one",new Student(4,18,"张三"));
studentMap.put("two",new Student(5,18,"张三"));
// map转为json
String studentMapStr = gson.toJson(studentMap);
System.out.println(studentMapStr);
// json转为map
Map<String,Student> studentMap1 = gson.fromJson(studentMapStr, new TypeToken<HashMap<String, Book>>() {
}.getType());
System.out.println(studentMap1);
}
}
Ajax：
Asynchronous Javascript And XML(异步 JavaScript 和 XML)。Ajax是一种浏览器异步发起请求（指定发哪些数据），局部更新页面数据的技术。
异步发起请求：即我向后台发送了数据，但我的整个页面不会重新刷新（这样避免了每次都向后端发送很多重复的，无用的数据）
首先我们简单的演示一下
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<script type="text/javascript">
window.onload = function () {
//页面加载后执行function
var checkButton = document.getElementById("checkButton");
//给checkButton绑定onclick
checkButton.onclick = function () {
// 创建XMLHttpRequest对象(!!!) [ajax引擎对象]
var xhr = new XMLHttpRequest();
// 获取用户填写的用户名
var uname = document.getElementById("uname").value;
// 准备发送指定数据 open, send
xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);
// 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件
xhr.onreadystatechange = function () {
//如果请求已完成，且响应已就绪, 并且状态码是200
if (xhr.readyState == 4 && xhr.status == 200) {
//把返回的jon数据,显示在div
document.getElementById("div1").innerHTML = xhr.responseText;
var responseText = xhr.responseText;
if (responseText != "") {
document.getElementById("myres").value = "用户名不可用"
} else {
document.getElementById("myres").value = "用户名可用"
}
}
}
xhr.send();
}
}
</script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/checkUserServlet" method="post">
用户名字:<input type="text" name="username" id="uname">
<input type="button" id="checkButton" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用户密码:<input type="password" name="password"><br/><br/>
电子邮件:<input type="text" name="email"><br/><br/>
<input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>
使用步骤
var xhr = new XMLHttpRequest();
GET方式
xmlhttp.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);
xmlhttp.send();
POST方式
xmlhttp.open("POST","/ajax/checkUserServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("uname" + uname);
因为要异步请求，所以open()方法的第三个参数必须为true
POST请求发送表单数据的时候，需要将表单数据添加到send()的参数里
GET请求发送表单数据的时候，是将表单数据添加发送地址后边
上面的用例，表单数据发送到时候在url后边添加了?uname=，这相当于表单数据的name名称，所以Servlet获取参数的时候应该是String uname = request.getParameter("uname");
XMLHttpRequest有两个属性，用来获取响应的数据。
responseText：获得字符串形式的响应数据。responseXML：获得XML形式的响应数据。xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
XMLHttpRequest对象有三个属性：
onreadystatechange：存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。readyState：XMLHttpRequest的状态，共四种。
- 0：请求未初始化
- 1：服务器连接已建立
- 2：请求已接收
- 3：请求处理中
- 4：请求已完成，且响应已就绪
status：状态码
- 200：响应成功
- 404：未找到页面
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入jquery-->
<script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//绑定事件
$("#btn1").click(function () {
//发出ajax
$.ajax({
url: "/ajax/checkUserServlet2",
type: "POST",
data: {
//这里我们直接给json传日期, 是为了浏览器缓存
username: $("#uname").val(),
date: new Date()
},
error: function () {
//失败后的回调函数
console.log("失败~")
},
success: function (data, status, xhr) {
console.log("成功");
console.log("data=", data);
console.log("status=", status);
console.log("xhr=", xhr);
//data是json对象-> 显示转成json的字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if ("" == data.username) {
$("#myres").val("该用户名可用");
} else {
$("#myres").val("该用户名不可用");
}
},
// dataType可以决定succes等回调函数处理数据的格式
dataType: "json"
})
})
})
</script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
用户名字:<input type="text" name="username" id="uname">
<input type="button" id="btn1" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用户密码:<input type="password" name="password"><br/><br/>
电子邮件:<input type="text" name="email"><br/><br/>
<input type="submit" id="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>
回调函数有三个参数：
success(response,status,xhr)：
- response - 包含来自请求的结果数据
- status - 包含请求的状态
- xhr - 包含 XMLHttpRequest 对象
示例：
$.get(
"/ajax/checkUserServlet",
{
username: $("#uname").val(),
date: new Date()
},
function (data, status, xhr) {
console.log("$.get() 成功");
console.log("data=", data);
console.log("status=", status);
console.log("xhr=", xhr);
//data是json对象-> 显示转成json的字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if ("" == data.username) {
$("#myres").val("该用户名可用");
} else {
$("#myres").val("该用户名不可用");
}
},
"json"
)
说明：
- $.get() 默认是get请求，不需要指定 请求方式
- 不需要指定参数名
- 填写的实参，是
顺序url, data, success回调函数, 返回的数据格式
示例：
和$.get()的方式一样
$.post(
"/ajax/checkUserServlet",
{
username: $("#uname").val(),
date: new Date()
},
function (data, status, xhr) {
console.log("$.post() 成功");
console.log("data=", data);
console.log("status=", status);
console.log("xhr=", xhr);
//data是json对象-> 显示转成json的字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if ("" == data.username) {
$("#myres").val("该用户名可用");
} else {
$("#myres").val("该用户名不可用");
}
},
"json"
)
这个方式的Ajax请求必须是
get请求，并且返回的数据格式必须是json
示例：
$.getJSON(
"/ajax/checkUserServlet2",
{
username: $("#uname").val(),
date: new Date()
},
function (data, status, xhr) {
//成功后的回调函数
console.log("$.getJSON 成功");
console.log("data=", data);
console.log("status=", status);
console.log("xhr=", xhr);
//data是json对象-> 显示转成json的字符串
$("#div1").html(JSON.stringify(data));
//对返回的结果进行处理
if ("" == data.username) {
$("#myres").val("该用户名可用");
} else {
$("#myres").val("该用户名不可用");
}
}
)
以上就是我分享的关于
Ajax和JSON的所有内容。讲解的不是很深入，适合于想快速上手的小伙伴！如果想要深入了解，大家可以去官网了解。
最后希望大家多多关注^_^，你们的关注是我不断前进的动力！！！
感谢感谢~~~
文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势，分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括：FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大
文章浏览阅读1.1k次，点赞2次，收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的：估计模块间的delay，确保写的代码的timing 综合能给到多少HZ，以满足需求！_基4布斯算法代码
文章浏览阅读3.3k次，点赞3次，收藏5次。OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版
文章浏览阅读2.2k次。USACO自1992年举办，到目前为止已经举办了27届，目的是为了帮助美国信息学国家队选拔IOI的队员，目前逐渐发展为全球热门的线上赛事，成为美国大学申请条件下，含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学，越来越多的学生进入了康奈尔，麻省理工，普林斯顿，哈佛和耶鲁等大学，这些同学的共同点是他们都参加了美国计算机科学竞赛（USACO)，并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学，高三学生也可以参加12月的第_usaco可以多次提交吗
文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程
文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0
文章浏览阅读2.8k次，点赞3次，收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画（无顶点位移），整个mesh由4个顶点构成。实现了水面效果（左图），不动代码稍微修改下参数和贴图可以实现岩浆效果（右图）。有要思路是1，uv按时间去做正弦波移动2，在1的基础上加个凹凸图混合uv3，在1、2的基础上加个水流方向4，加上对雾效的支持，如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader
文章浏览阅读5k次。广义线性模型是线性模型的扩展，它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为：其中g(μY)是条件均值的函数（称为连接函数）。另外，你可放松Y为正态分布的假设，改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后，便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下，线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是，有时候我们要进行非正态因变量的分析，例如：（1）类别型.._广义线性回归模型
文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△） 一套A+的网_垃圾分类网页设计目标怎么写
文章浏览阅读614次，点赞7次，收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录
文章浏览阅读1.5k次。本文为转载，原博客地址：http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出，BRIEF是对已检测到的特征点进行描述，它是一种二进制编码的描述子，摈弃了利用区域灰度..._breif description calculation 特征点
文章浏览阅读4.1k次，点赞21次，收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文