技术标签： 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的所有内容。讲解的不是很深入，适合于想快速上手的小伙伴！如果想要深入了解，大家可以去官网了解。
最后希望大家多多关注^_^，你们的关注是我不断前进的动力！！！
感谢感谢~~~
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry，也就是我们所说的 使用空间SQL 的方法，官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下，主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数，需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数，转换过程中受到系统编码类型的影响，需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入，结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误，google一下，发现可能有如下原因导致imp的数据太大，没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件，向高版本imp导出的dmp文件出错传输dmp文件时，文件损坏解决办法：imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代，各个行业都离不开数据的支持。因此，网络爬虫就应运而生。网络爬虫当下最为火热的是Python，Python开发爬虫相对简单，而且功能库相当完善，力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页，按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息，通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次，点赞73次，收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能，如果文件名出现中文，便会以乱码视之。 解决方法： fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次，点赞4次，收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别，找出文件中所有的合法的单词，并给出一定的信息作为最后的结果，用于后续语法分析程序的使用；本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序，对于每个单词根据词汇表输出： (单词种类, 单词的值) 二元对。词汇表：种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次，点赞12次，收藏125次。1. 单目相机标定引言相机标定已经研究多年，标定的算法可以分为基于摄影测量的标定和自标定。其中，应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统，在标定过程中，相机拍摄多个角度下（至少两个角度，推荐10~20个角度）的标定板图像（相机和标定板都可以移动），即可对相机的内外参数进行标定。下面介绍张氏标定法（以下也这么称呼）的原理。原理相机模型和单应矩阵相机标定，就是对相机的内外参数进行计算的过程，从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述： 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构；一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件，并通过 evdev 输入_wayland