public class User {
private Integer id;
private String name;
private String password;
private Date birthday;
3、使用FastJson工具类转换对象
(1)单个java对象转换为JSON串
/**
- 转换单个对象
*/
@Test
public void FastJson() {
//1.创建一个对象
User user = new User(1, “王恒杰”, “123456”, new Date());
// 打印对象
System.out.println(“User对象”+user);
/**
使用fastJson将User对象转换为json形式的字符串
参数:要转化的对象
返回值:json字符串
*/
String json = JSONObject.toJSONString(user);
System.out.println(“json串”+json);
}
- 转换后结果
注:我们会发现对象转换为JSON串时,日期转化不会正常显示 ,他会显示为毫秒!FastJson专门提供一个API解决日期格式转化 问题!
(2)java对象转换为JSON串日期转化方案
/**
- java对象转换为JSON串日期转化方案
*/
@Test
public void FastJson() {
//1.创建一个对象
User user = new User(1, “王恒杰”, “123456”, new Date());
// 打印对象
System.out.println(“User对象”+user);
/**
2.使用fastJson将User对象转换为json形式的字符串
参数:要转化的对象
返回值:json字符串
*/
String json1 = JSONObject.toJSONString(user);
System.out.println(“json串”+json1);
/**
3.fastJson日期格式转化API
参数1:要转化的对象
参数2:日期转化 可以写成 yyy-mm-dd && yyyy-mm-dd hh:mm:ss两种
返回值:日期格式化后的json串
*/
String json2 = JSONObject.toJSONStringWithDateFormat(user, “yyyy-mm-dd hh:mm:ss”);
System.out.println(“日期格式化后的json串”+json2);
}
- 转换后结果
(3)List集合对象转换为JSON串
@Test
public void ListByFastJsonTest(){
//1.创建List集合
ArrayList list = new ArrayList<>();
//2,添加数据
list.add(new User(1, “王恒杰1”, “123456”, new Date()));
list.add(new User(2, “王恒杰2”, “123456”, new Date()));
list.add(new User(3, “王恒杰3”, “123456”, new Date()));
list.add(new User(4, “王恒杰4”, “123456”, new Date()));
//通过fastJson将List集合转换为json串
String listUser = JSONObject.toJSONStringWithDateFormat(list, “yyyy-mm-dd”);
System.out.println(listUser);
}
- 转换后结果
(4)map集合对象转换为JSON串
@Test
public void MapByFastJsonTest() {
//1.创建map集合
Map<String, String> map = new HashMap<>();
//2,添加数据
map.put(“1号选手”, “王恒杰1”);
map.put(“2号选手”, “王恒杰2”);
map.put(“3号选手”, “王恒杰3”);
map.put(“4号选手”, “王恒杰4”);
//通过fastJson将map集合转换为json串
String json = JSONObject.toJSONString(map);
System.out.println(json);
}
- 转换后结果
(5)使用注解的方法解决日期格式
- 实体类User:
- 测试方法:
@Test
public void DateByFastJsonTest(){
User user = new User();
user.setBirthday(new Date());
String json = JSONObject.toJSONString(user);
System.out.println(json);
}
- 转换后结果
===================================================================================================
先对与fastJson来说:Gson在功能上面无可挑剔,但是性能上面比FastJson有所差距。因为我很少使用,所以Gson我就测试了一个!
1、在maven项目中导入Fastjson 的依赖
com.google.code.gson
gson
2.8.5
2、创建实体类User
public class User {
private Integer id;
private String name;
private String password;
private Date birthday;
3、单个java对象转换为JSON串:toJson
/**
- Gson转换单个对象
*/
@Test
public void Gson() {
//1.创建一个对象
User user = new User(1, “王恒杰”, “123456”, new Date());
// 打印对象
System.out.println(“User对象” + user);
/**
- 2.使用Gson将User对象转换为json形式的字符串
*/
Gson gson = new Gson();
String json = gson.toJson(user);
System.out.println(json);
}
- 转换后结果
4、java对象转换为JSON串日期转化方案
@Test
public void DateGson() {
//1.创建一个对象
User user = new User(1, “王恒杰”, “123456”, new Date());
// 打印对象
System.out.println(“User对象” + user);
/**
- 2.使用Gson将User对象转换为json形式的字符串
*/
GsonBuilder builder = new GsonBuilder();
Gson gson = builder.setDateFormat(“yyyy-mm-dd”).create();
String json = gson.toJson(user);
System.out.println(json);
}
- 转换后结果
=========================================================================================
在项目选型的时候可以使用Google的Gson和阿里巴巴的FastJson两种并行使用,
如果只是功能 要求,没有性能 要求,可以使用google的Gson,
如果有性能上面的要求可以使用Gson将bean转换json确保数据的正确,使用FastJson将Json转换Bean
==========================================================================================
//json形式字符串:xhr.responseText
转换方式1: var JsJsonObject=JSON.parse(xhr.responseText);
转换方式2: var JsJsonObject=eval(“+(xhr.responseText)+”);
JSJsonObject属性名 获取对应属性值
- 前后端json转化总结:
java对象:使用json转换工具(FastJson) 将对象转换为json串 再进行转换
js: 将接收到的json字符串转换为js中的json对象
=================================================================================
1、案例要求:单击展示单个用户信息 & 验证用户名是否存在
2、具体实现
(1)技术选型:
Servlet+html+Ajax+js(主要展示ajax&FastJson效果),Ajax我们使用的是原生js实现
(2)所需要依赖
javax.servlet
javax.servlet-api
3.1.0
provided
javax.servlet.jsp
jsp-api
2.1
com.alibaba
fastjson
1.2.47
(3)实体类User
public class User {
private Integer id;
private String name;
private String password;
private Date birthday;
(3)html
用户名:
(4)ajax实现数据传输
(5)servlet实现后端
- 单击展示单个用户信息
@WebServlet(“/checkName”)
public class CheckServlet extends HttpServlet {
@Override
public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//统一编码格式
request.setCharacterEncoding(“utf-8”);
response.setContentType(“text/html;setchar=utf-8”);
response.setCharacterEncoding(“utf-8”);
//接收数据
String name = request.getParameter(“name”);
User user = new User(1, “王恒杰”, “123456”, new Date());
//处理业务
if (user.getName().equals(name)) {
response.getWriter().print(“用户可以被查询到!”);
} else {
//验证用户名是否存在
response.getWriter().print(“用户不存在”);
}
}
}
- 验证用户名是否存在
@WebServlet(“/user”)
public class UserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//统一编码格式
request.setCharacterEncoding(“utf-8”);
response.setContentType(“text/html;setchar=utf-8”);
response.setCharacterEncoding(“utf-8”);
//接收数据
String name = request.getParameter(“name”);
User user = new User(1, “王恒杰”, “123456”, new Date());
//处理业务
// 响应输出流 向客户端响应内容
String jsonUser = JSONObject.toJSONStringWithDateFormat(user, “yyyy-mm-dd”);
response.getWriter().print(jsonUser);
}
}
效果展示:
===================================================================================
1、实现步骤:
1.给按钮添加单击事件
2.发送请求查询多个用户
前端Ajax实现:
var btn=document.getElementById(“btn”);
btn.οnclick=function(){
//发送请求查询多个用户
var xhr=new XmlHttpRequest();
xhr.open(“get|post”,“/xxx/queryAllServlet”);
//[post需要添加]xhr.setRequestHeader(“content-type”,“app…”);
xhr.send();
on.onreadystatechange=funtion(){
if(xhr.readyState=4&&xhr.status==200){
//响应数据
//xhr.responseText;//json字符串
var users=JSON.parse(xhr.responseText);//json形式js对象
//var users=eval(“(”+xhr.responseText+“)”)//json形式js对象
//遍历
for(var i=0;i<users.length;i++){
//js操作页面结构
}
}
}
}
后端用Servelt|Struts2实现:
queryAll{
//接收数据
//调用业务
List users=new UserServicce.queryAll();
//将users转换为json形式字符串(fastJson实现)
String JsonUsers=JSONObject.JSONString(users);
//响应数据
response.getWriter().pront(jsonUsers);
}
2、不同的浏览器版本发送异步请求
属性:XMLHttpRequest 布尔值 true:WebKit内核 false:IE内核
js浏览器差异 IE内核 WebKit内核
3、Ajax实现前端:
%@ page contentType=“text/html;charset=UTF-8” language=“java” isELIgnored=“false” %>
4、Servlet实现后端
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList list = new ArrayList<>();
//2,添加数据
list.add(new User(1, “王恒杰1”, “123456”, new Date()));
list.add(new User(2, “王恒杰2”, “123456”, new Date()));
list.add(new User(3, “王恒杰3”, “123456”, new Date()));
list.add(new User(4, “王恒杰4”, “123456”, new Date()));
String usersJson = JSONObject.toJSONStringWithDateFormat(list, “YYYY-MM-DD”);
response.setCharacterEncoding(“utf-8”);
response.getWriter().print(usersJson);
}
==================================================================================
1、javaScript实现Ajax请求发送出现的问题
编码冗余
考虑浏览器差异问题
2、Jquery实现Ajax请求发送
Jquery框架天生支持Ajax请求
使用Ajax发送请求,必须要引入对应的js文件
<%-- 引入jquery对应文件–%>
3、怎么样使用jquery发送Ajax请求?
(1)get请求方式
$.get(url,[data],[callback],[type])=jquery.get(url,[data],[callback],[type]);
参数:url 请求发送的目标地址 “/xxx/xxAction”
data 要向服务端传递的数据 “name=whj&…”
3.callback 回调函数 表示响应解析完成并且正确情况下 你需要执行的功能
- 返回内容格式 xml,html,script json 通过type可以设置响应回来的响应类型
text:返回数据类型字符串
json:会自动将返回的数据封装成json对象(相当于 JSON.parse());
*使用场景:
发送请求,不处理响应 $.get(“url”)
发送请求,传递数据,不处理响应 $.get(“url”,“name=whj”)
发送请求,不传递数据,处理响应 $.get(“url”,function(){})
发送请求,传递数据,处理响应 $.get(“url”,“name=whj”,function({}));
发送请求,传递数据,处理响应,同时设置返回类型 $.get(“url”,“name=whj”,function({}),“json”);
*注意:调用jquery语法时jquery=$
- 用get请求方式给按钮绑定单机事件获取多个数据
<%@ page contentType=“text/html;charset=UTF-8” language=“java” isELIgnored=“false” %>
<%-- 引入jquery对应文件–%>
- 效果展示
(2)post方式请求
$post(url,[data],[callback],[type])
1.url:请求的资源路径。
data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
- 用post请求方式给按钮绑定单机事件获取多个数据
<%@ page contentType=“text/html;charset=UTF-8” language=“java” isELIgnored=“false” %>
<%-- 引入jquery对应文件–%>