技术标签： 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的所有内容。讲解的不是很深入，适合于想快速上手的小伙伴！如果想要深入了解，大家可以去官网了解。
最后希望大家多多关注^_^，你们的关注是我不断前进的动力！！！
感谢感谢~~~
文章浏览阅读216次。Activity,Window,DecorView简介关系图ActivityWindowDecorViewViewRoot关联过程简析Activity->setContentView简单分析Activity获取window的流程前提摘要：仅个人笔记整理，参考文章https://lrh1993.gitbooks.io/android_interview_guide/content/android/basis/decorview.htmlActivity,Windo.._activity decorview window
文章浏览阅读4.9k次。今日头条阅读量怎么刷呢，这是很多小伙伴们都关注的一个问题。今日头条怎么增加阅读量呢，有没有轻松简单的方法?今日头条阅读量怎么刷?你可以让水军帮你买阅读量，那些几千万阅读量的基本都是靠水军买阅读量。今日头条买阅读量除了真人，还有一种方法，就是今日头条买阅读量软件。这个据说可以提高几千万阅读量的神器，我们就来看下到底是不是真的，会不会封号。因为大家对今日头条买阅读量比较关注，所以多说了一些。今日头条怎..._今日头条怎么买阅读量
文章浏览阅读2.1k次。IPFS最新资讯！前阵子各种消息的发布，让很多朋友非常紧张甚至不安。而且随后发布的行业消息也让很多朋友摸不着头脑。Web3.0中国峰会在6月18号四川全面关闭矿场之后，由四川政府主办的“Web3.0中国峰会中国大数据应用大会暨 IPFS区块链分布式存储行业大会”将于7月15日在成都世纪城新国际会展中心举行。之前已经宣布关闭四川比特币矿场，后面还将举行区块链分布式存储大会，这意味着什么？IPFS以分布式存储为核心，正好符合区块链技术的特点和需求。各种因特网数据都需要存储，这为 IPFS的发展提供了巨_成都ipfs大会
文章浏览阅读4.4k次，点赞9次，收藏69次。课程路径：华南理工大学公开课：网络安全网络安全将是未来的基石，万物互联的基础保障。第一节 现状分析病毒，变种病毒；漏洞攻击，技术人员的后门导致；假网址；中断，截获，篡改，伪造被动攻击和主动攻击安全服务：保密，认证，完整，不可否认安全框架：安全攻击，安全服务，安全机制第二节 常规加密技术公钥密码学加密操作类型：代换，置换，多重加密单密钥算法和多密钥算法对称加密：发送..._安全知识笔记
文章浏览阅读3.2k次，点赞4次，收藏6次。functioncheck(date){ return(newDate(date).getDate()==date.substring(date.length-2)); } //参数date可以格式化为xx-xx-xx或xxxx-xx-xx或用/分割 附：通常来说，javascript验证日期的有效性可以通过正则判断但正则表达式无法精准验证日期的有效性，你无法通过正则表达式判断出1900-02-29是非法日期而2000-02-29是合法日期，..._js判断日期是否合法
文章浏览阅读1.2k次。使用OpenCV库，进行混合编程时mex.c文件能够编译成功，并且生出mexw64文件： 但是在调用编程成功的函数时，提示下面的错误： 解决方法： 将系统环境变量中的OpenCV bin目录进行如下的修改。 将x86修改为x64，即：C:\OpenCV2.4\build\x86\vc10\bin;修改为：C:\OpenCV2.4\build\x64\..._mex 文件 'resize.mexw64' 无效: opencv
文章浏览阅读425次，点赞4次，收藏2次。动态规划随着阶段增长，在每个状态维度上会不断扩展；任意时刻已求解状态和尚未求解的状态在各个维度上的分界点组成DP扩展的轮廓。对于某些问题，我们需要在动态规划的“状态”中记录一个集合，保存这个“轮廓”的详细信息，以便进行状态转移。 若集合大小不超过N，集合中每个元素都是小于K的自然数，则我们可以把这个集合看作一个N位K进制数，以一个[O,KN−1][O,K^{N-1}][O,KN−1]之间的十进制整数的形式作为DP状态的一维。状态压缩DP：将集合转化为整数记录在DP状态中的一类算法。使用条件：一般能够._dp状态数太大
文章浏览阅读1.8k次。1. 问题 之前我们讨论的PCA、ICA也好，对样本数据来言，可以是没有类别标签y的。回想我们做回归时，如果特征太多，那么会产生不相关特征引入、过度拟合等问题。我们可以使用PCA来降维，但PCA没有将类别标签考虑进去，属于无监督的。 比如回到上次提出的文档中含有“learn”和“study”的问题，使用PCA后，也许可以将这两个特征合并为一个，降了维度。但假设我们的_拟合判别分析分类器
文章浏览阅读905次。package live.every.day.ProgrammingDesign.CodingInterviewGuide.List;/** * 在单链表中删除指定值的节点 * * 【题目】 * 给定一个链表的头节点head和一个整数num，请实现函数将值为num的节点全部删除。 * * 【难度】 * 简单 * * 【解答】 * 方法二：不用任何容器而直接调整的方法。时间复杂度为O(N)，额外空间复杂度为O(1)。 * * 首先从链表头开始，找到第一个值不等于num的节点，作为新_单向链表怎么删除指定节点数据
文章浏览阅读1.4k次。第一步：注册IBM id账号第二步：下载相关系统的CPLEX（windows/linux/mac）这里需要系统中安装有JAVA，选择 open with Java web start launcher （需要下载JAVA），打开后就开始进入下载页面。补充JAVA安装：备注：JAVA可以通过rpm包安装，或者是bin文件安装。Rpm安装可以直接双击就可以打开jnlp后缀的文件，bin文件安装的话，需..._cplex求解双目标混合整数规划模型
文章浏览阅读2.5k次。CentOS 7 编译安装MariaDB-10.2.XCentOS 7下mariadb-10.1.22 源码编译安装过程笔记，希望对大家有帮助。 下载文件https://mariadb.com/ 或 https://downloads.mariadb.org/mariadb/10.2.11/ 源码包的下载下载链接： https://mirrors.tuna.tsinghua.edu.cn/m_group ‘mail’ not found
文章浏览阅读462次，点赞11次，收藏8次。网上的WPS各个版本基本都带有稻香插件，广告一堆堆，用户需要注册才能减少广告的显示，但依然时不时跳出来显示。其实WPS给大学做过一些版本，这种定制版本应用于大学院系的文档编写使用。最关键的是这个版本没有广告，没有稻香，没有推荐模板，只有纯净的WPS。界面虽然不华丽，风格还是很传统office2000风格，不是烦人的多标签页，也不会隐藏。工具栏不会藏着掖着直接横排展示所有图标，鼠标不用切换页，所有工具一目了然。这集美大学版本是办公软件的不二之选。_wps 大客户版