一、json
简介：
json是一个轻量级数据交换格式 主要用于前后端数据传输
json传输效率比较高 便于解析
json就是一个特殊的字符串 这个字符串有固定的格式
语法：
对象：{} ===> 表示是对象 例如:{"uid":10,"uname":"张三"}
数组：[] ===> 表示是数组 例如:[{"uid":10,"uname":"张三"},{"uid":11,"uname":"李 四"} ]
对象嵌套数组 或者是数组嵌套对象 ：
A.对象中嵌套数组 {"employees": [{ "firstName":"Bill" , "lastName":"Gates" }]}
B.数组中嵌套对象 [{date: "Sep 18 2016", music: { title: "夜夜夜夜-齐秦"}}]
注意点：
A.json是以键值对来进行存储
B.json中每一个属性与属性值都是以冒号分割
C.json中每一个组属性值都是以逗号分割
参考网站：https://www.sojson.com/json2entity.html
fastJson解析：
package com.qf.test;
import com.alibaba.fastjson.JSON;
import com.qf.entity.Books;
import com.qf.entity.Person;
import com.qf.entity.Student;
import java.util.ArrayList;
import java.util.List;
public class Test01 {
public static void main(String[] args) {
//实例化学生对象
Student stu = new Student(1001,"张珊","123456");
//将学生对象转换为json串
String s = JSON.toJSONString(stu);
System.out.println(s);
//将json串解析为Student对象
Student student = JSON.parseObject(s, Student.class);
System.out.println(student);
//实例化集合
List<Student> list = new ArrayList<>();
//添加元素
list.add(new Student(1002,"李思","123"));
list.add(new Student(1003,"王舞","1223"));
list.add(new Student(1004,"赵柳","1244"));
//将集合转换为json串
String s1 = JSON.toJSONString(list);
System.out.println(s1);
//将json串解析为集合
List<Student> list1 = JSON.parseArray(s1, Student.class);
System.out.println(list1);
String json1 = "{'name':'huochai','age':29,'school':{'name':'iankeyuan','location':'beijing'}}";
Person person = JSON.parseObject(json1, Person.class);
System.out.println(person);
String json2 = "[\n" +
" {\n" +
" date: \"Sep 18 2016\",\n" +
" title: \"御剑飞仙翱于九天\",\n" +
" imgSrc: \"/images/post/crab.png\",\n" +
" avatar: \"/images/avatar/1.png\",\n" +
" content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
" reading: \"112\",\n" +
" collection: \"96\",\n" +
" headImgSrc: \"/images/post/crab.png\",\n" +
" author: \"林白衣\",\n" +
" dateTime: \"24小时前\",\n" +
" detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
" postId: 0,\n" +
" music: {\n" +
" url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
" title: \"夜夜夜夜-齐秦\",\n" +
" coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
" }\n" +
" },\n" +
"\n" +
"{\n" +
" date: \"Sep 18 2016\",\n" +
" title: \"御剑飞仙翱于九天\",\n" +
" imgSrc: \"/images/post/crab.png\",\n" +
" avatar: \"/images/avatar/1.png\",\n" +
" content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
" reading: \"112\",\n" +
" collection: \"96\",\n" +
" headImgSrc: \"/images/post/crab.png\",\n" +
" author: \"林白衣\",\n" +
" dateTime: \"24小时前\",\n" +
" detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
" postId: 0,\n" +
" music: {\n" +
" url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
" title: \"夜夜夜夜-齐秦\",\n" +
" coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
" }\n" +
" }\n" +
"\n" +
" \n" +
" \n" +
"]";
List<Books> books = JSON.parseArray(json2, Books.class);
for (Books b :books) {
System.out.println(b);
}
}
}gson 解析：
package com.qf.test;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.qf.entity.Books;
import com.qf.entity.Student;
import java.util.ArrayList;
import java.util.List;
public class Test02 {
public static void main(String[] args) {
//实例化Gson对象
Gson g = new Gson();
Student student = new Student(1001,"张珊","123456");
//将对象转换为json串
String s = g.toJson(student);
System.out.println(s);
//将json串解析为对象\
Student student1 = g.fromJson(s, Student.class);
System.out.println(student);
List<Student> list = new ArrayList<>();
list.add(new Student(1002,"李思","123"));
list.add(new Student(1003,"王舞","123"));
list.add(new Student(1004,"赵柳","123"));
list.add(new Student(1005,"孙琦","123"));
//将集合转换为json串
String s1 = g.toJson(list);
System.out.println(s1);
//将json串解析为集合
List<Student> list1=g.fromJson(s1,new TypeToken<List<Student>>(){}.getType());
System.out.println(list1);
String json2 = "[\n" +
" {\n" +
" date: \"Sep 18 2016\",\n" +
" title: \"御剑飞仙翱于九天\",\n" +
" imgSrc: \"/images/post/crab.png\",\n" +
" avatar: \"/images/avatar/1.png\",\n" +
" content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
" reading: \"112\",\n" +
" collection: \"96\",\n" +
" headImgSrc: \"/images/post/crab.png\",\n" +
" author: \"林白衣\",\n" +
" dateTime: \"24小时前\",\n" +
" detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
" postId: 0,\n" +
" music: {\n" +
" url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
" title: \"夜夜夜夜-齐秦\",\n" +
" coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
" }\n" +
" },\n" +
"\n" +
"{\n" +
" date: \"Sep 18 2016\",\n" +
" title: \"御剑飞仙翱于九天\",\n" +
" imgSrc: \"/images/post/crab.png\",\n" +
" avatar: \"/images/avatar/1.png\",\n" +
" content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
" reading: \"112\",\n" +
" collection: \"96\",\n" +
" headImgSrc: \"/images/post/crab.png\",\n" +
" author: \"林白衣\",\n" +
" dateTime: \"24小时前\",\n" +
" detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
" postId: 0,\n" +
" music: {\n" +
" url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
" title: \"夜夜夜夜-齐秦\",\n" +
" coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
" }\n" +
" }\n" +
"\n" +
" \n" +
" \n" +
"]";
List<Books> list2 =g.fromJson(json2,new TypeToken<List<Books>>(){}.getType());
for (Books b :list2) {
System.out.println(b);
}
}
}二、ajax
简介：
ajax是一种动态网页技术
主要用于页面的局部加载
ajax的特点：
局部加载：
只需要加载网页页面的一部分，不用加载整个页面 效率高
同步（不是ajax的特点，这里只是介绍）：
先获取完整的数据，再加载页面 例如：转账时的同步
异步：
先加载页面，在获取数据 例如：直播弹幕，先加载直播画面 在加载弹幕
ajax的使用场景：
注册手机号验证
直播弹幕
百度搜索
案例：
需求：验证用户名是否可用
get方式jsp代码：
<%--
Created by IntelliJ IDEA.
User: 86182
Date: 2022/9/8
Time: 10:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<input type="text" id="tv_uname" onblur="cheleckName()"><span style="color: red" id="tv_sp"></span>
<script>
function cheleckName() {
var uname = document.getElementById("tv_uname").value;
if (uname==null||uname==""){
document.getElementById("tv_sp").innerHTML="输入不能为空";
}else {
//获取ajax核心对象
xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
//get方法 url地址
var url = "userServlet?uname="+uname;
//建立连接
xmlHttpRequest.open("get",url,true);//第一个参数表示提交方式，第二个参数表示请求地址，第三个参数表示是否支持异步
//发送请求
xmlHttpRequest.send(null);//get方式提交 传递的参数已经在URL地址上拼接了
}
}
function callBack() {
//xmlHttpRequest.readyState ==4 表示与服务器建立了连接
// xmlHttpRequest.status ==200 表示响应成功
//判断是否连接并响应成功
if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
//获取服务器传递的标记
var flag = xmlHttpRequest.responseText;
//判断
if (flag=="true"){
document.getElementById("tv_sp").innerHTML="用户名可以使用";
}else {
document.getElementById("tv_sp").innerHTML="用户名不可以使用";
}
}
}
</script>
</body>
</html>以post方式提交的jsp页面：
<%--
Created by IntelliJ IDEA.
User: 86182
Date: 2022/9/8
Time: 10:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<input type="text" id="tv_uname" onblur="cheleckName()"><span style="color: red" id="tv_sp"></span>
<script>
function cheleckName() {
var uname = document.getElementById("tv_uname").value;
if (uname==null||uname==""){
document.getElementById("tv_sp").innerHTML="输入不能为空";
}else {
//获取ajax核心对象
xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
//get方法 url地址
//var url = "userServlet?uname="+uname;
//post方式 URL地址
var url = "userServlet";
//建立连接
xmlHttpRequest.open("post",url,true);//第一个参数表示提交方式，第二个参数表示请求地址，第三个参数表示是否支持异步
//以post方式提交必须设置请求头
xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
//xmlHttpRequest.send(null);//get方式提交 传递的参数已经在URL地址上拼接了
//以post方式提交 要发送参数
var data = "uname="+uname;
xmlHttpRequest.send(data);
}
}
function callBack() {
//xmlHttpRequest.readyState ==4 表示与服务器建立了连接
// xmlHttpRequest.status ==200 表示响应成功
//判断是否连接并响应成功
if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
//获取服务器传递的标记
var flag = xmlHttpRequest.responseText;
//判断
if (flag=="true"){
document.getElementById("tv_sp").innerHTML="用户名可以使用";
}else {
document.getElementById("tv_sp").innerHTML="用户名不可以使用";
}
}
}
</script>
</body>
</html>UserServlet类：
package com.qf.servlet;
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.io.PrintWriter;
@WebServlet(name = "userServlet",urlPatterns = "/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取前端传递的参数
String uname = req.getParameter("uname");
//定义一个标记
boolean flag = false;
//模拟验证
if ("admin".equals(uname)){
//表示用户名已经存在 不能使用
flag = false;
}else {
//表示用户名不存在可以使用
flag = true;
}
//将标记返回给ajax
PrintWriter writer = resp.getWriter();
writer.print(flag);
//刷新
writer.flush();
//关闭资源
writer.close();
}
}使用jquery方式实现：
url ==>表示请求路径
type==>表示提交方式
data ==>表示请求传递的参数
dataType==>表示返回数据的类型 text json xml
success==> 表示请求成功的回调
error==> 表示请求失败的回调
<%--
Created by IntelliJ IDEA.
User: 86182
Date: 2022/9/8
Time: 16:26
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="text" id="tv_uname"><span style="color: red" id="tv_sp"></span>
<script>
// 使用jquery方式实现ajax
/*$("#tv_uname").blur(function () {
var uname = $("#tv_uname").val();
if (uname==null||uname==""){
$("#tv_sp").html("不能为空");
}else {
$.ajax({
"url":"userServlet",
"type":"post",
"data":{"uname":uname},
"dataType":"text",
"success":function (data) {
if (data=="true"){
$("#tv_sp").html("可以使用");
}else {
$("#tv_sp").html("不可以使用");
}
},
"error":function () {
alert("请求失败");
}
});
}
})*/
//简化jquery方式实现
$("#tv_uname").blur(function () {
var uname = $("#tv_uname").val();
if (uname==null||uname==""){
$("#tv_sp").html("不能为空");
}else {
$.post("userServlet",{"uname":uname},function (data) {
if (data=="true"){
$("#tv_sp").html("可以使用");
}else {
$("#tv_sp").html("不可以使用");
}
},"text")
}
})
</script>
</body>
</html>案例：
需求：动态填充table 和 ul
代码：
jsp
<%--
Created by IntelliJ IDEA.
User: 86182
Date: 2022/9/8
Time: 16:02
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<table id="tv_ta" width="80%" border="1px" cellspacing="0px" cellpadding="0px" align="center">
</table>
<ul id="tv_ul">
</ul>
<script>
function show1(){
$.ajax({
"url":"servlet1",
"type":"post",
"data":{},
"dataType":"text",
"success":function (data) {
//将后端传递的数据转换为前端可以解析的json
var jsonStr = JSON.parse(data);
//定义一个变量拼接
var temp = "";
//循环json串
$(jsonStr).each(function () {
temp+="<li>"+this+"</li>";
})
//将数据写入页面
$("#tv_ul").html(temp);
},
"error":function () {
alert("请求失败");
}
});
}
function show2(){
$.ajax({
"url":"servlet2",
"type":"post",
"data":{},
"dataTyep":"text",
"success":function (data) {
//将接收的数据转换为json串
var jsonStr=JSON.parse(data);
//定义一个变量拼接
var temp="";
//循环
$(jsonStr).each(function () {
temp+="<tr>";
temp+="<td>"+this.sid+"</td>";
temp+="<td>"+this.sname+"</td>";
temp+="<td>"+this.spwd+"</td>";
temp+="</tr>"
})
//将数据写入页面
$("#tv_ta").html(temp);
},
"eroor":function () {
alert("请求失败")
}
});
}
$(function () {
show1();
show2();
});
</script>
</body>
</html>servlet：
package com.qf.servlet;
import com.alibaba.fastjson.JSON;
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.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "servlet1",urlPatterns = "/servlet1")
public class Servlet1 extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//实例化集合
List<String > list = new ArrayList<>();
list.add("张珊");
list.add("李思");
list.add("王舞");
//将集合转换为json串
String s = JSON.toJSONString(list);
//实例化输出流
PrintWriter pw = resp.getWriter();
//将json串传输给前端
pw.print(s);
pw.flush();
pw.close();
}
}
package com.qf.servlet;
import com.alibaba.fastjson.JSON;
import com.qf.entity.Student;
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.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "servlet2",urlPatterns = "/servlet2")
public class Servlet2 extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//实例化集合
List<Student> list = new ArrayList<>();
list.add(new Student(1001,"班长","嫩老"));
list.add(new Student(1002,"梁男","钓鱼老"));
list.add(new Student(1003,"黑福","洗脚老"));
//将集合转换为json串
String s = JSON.toJSONString(list);
//实例化输出流
PrintWriter pw = resp.getWriter();
//将json串传输给前端
pw.print(s);
pw.flush();
pw.close();
}
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
