技术标签： 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的所有内容。讲解的不是很深入，适合于想快速上手的小伙伴！如果想要深入了解，大家可以去官网了解。
最后希望大家多多关注^_^，你们的关注是我不断前进的动力！！！
感谢感谢~~~
文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下：http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态：[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态
文章浏览阅读1.3w次，点赞45次，收藏99次。我个人用的是anaconda3的一个python集成环境，自带jupyter notebook，但在我打开jupyter notebook界面后，却找不到对应的虚拟环境，原来是jupyter notebook只是通用于下载anaconda时自带的环境，其他环境要想使用必须手动下载一些库：1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境
文章浏览阅读5.2k次，点赞19次，收藏28次。选择scoop纯属意外，也是无奈，因为电脑用户被锁了管理员权限，所有exe安装程序都无法安装，只可以用绿色软件，最后被我发现scoop，省去了到处下载XXX绿色版的烦恼，当然scoop里需要管理员权限的软件也跟我无缘了（譬如everything）。推荐添加dorado这个bucket镜像，里面很多中文软件，但是部分国外的软件下载地址在github，可能无法下载。以上两个是官方bucket的国内镜像，所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn
文章浏览阅读4.5k次，点赞2次，收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty..._vue el-color-picker
文章浏览阅读640次。基于芯片日益增长的问题，所以内核开发者们引入了新的方法，就是在内核中只保留函数，而数据则不包含，由用户（应用程序员）自己把数据按照规定的格式编写，并放在约定的地方，为了不占用过多的内存，还要求数据以根精简的方式编写。boot启动时，传参给内核，告诉内核设备树文件和kernel的位置，内核启动时根据地址去找到设备树文件，再利用专用的编译器去反编译dtb文件，将dtb还原成数据结构，以供驱动的函数去调用。firmware是三星的一个固件的设备信息，因为找不到固件，所以内核启动不成功。_exynos 4412 刷机
文章浏览阅读2w次，点赞24次，收藏42次。Linux系统配置jdkLinux学习教程，Linux入门教程（超详细）_linux配置jdk
文章浏览阅读3.3k次，点赞5次，收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图：_matlab微米怎么输入
文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件，可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中，对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数，而关闭则使用fclose函数。在C语言中，可以使用fread和fwrite函数进行二进制读写。 Biaoge 于2024-03-09 23:51发布 阅读量：7 ️文章类型：【 C语言程序设计 】在C语言中，用于打开文件的函数是____，用于关闭文件的函数是____。
文章浏览阅读3.4k次，点赞2次，收藏13次。跟随鼠标移动的粒子以grid（SOP）为partical（SOP）的资源模板，调整后连接【Geo组合+point spirit（MAT)】，在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in（CHOP)鼠标位置到metaball的坐标，实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动
文章浏览阅读178次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计
文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多，会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析，后面会慢慢更新。另外，博客只作为自己学习记录的一种方式，对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图
文章浏览阅读2.4k次，点赞41次，收藏13次。java 数据结构与算法 ——快速排序法_快速排序法