ajax 和Json
ajax简介
Ajax 即“Asynchronous Javascript AndXML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
ajax如何工作
图片来自菜鸟教程
首先了解一下ajax的格式,常用参数
#ajax请求分get和post以下是常见最经常使用的参数
jQuery.get({
url: 要请求的url
data: 发送的数据(键值对的形式,可以多个参数)
success: 成功是执行的函数
dataType: 返回内容的格式
})
jQuery.post({
url: 要请求的url
dara: 发送的数据(键值对的形式,可以多个参数)
success: 成功是执行的函数
dataType: 返回内容的格式
})
#部分参数
jQuery.ajax(...)
部分参数:
url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒)
beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)
accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
使用jQuery实现ajax
-
下载jquery.min.js :下载地址
-
先编写一个后端的请求(用于一会ajax请求返回数据)
@Controller public class AjaxController { @RequestMapping("/getData") @ResponseBody public String getData(String name){ return name; } }
-
编写前端代码:(设置一个按钮给它一个点击事件,通过点击事件触发ajax请求后端)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/jquery-3.5.1.min.js"></script> <title>Document</title> </head> <body> <input type="text" id="data" value="13123">//输入框用来传输参数 <input id="submit" onclick="a1()" type="button" value="请求">//触发事件 <script> var qs = $("#data").val();//获取输入框的参数 function a1() { $.ajax({ url:"http://localhost:8080/getData",//请求的地址 data: {name:qs},//请求参数(键值对的形式,可以多个参数) success: function (data) {//成功回调函数 console.log(data);//控制台打印返回的数据 alert(data);//警告框提示返回数据 } }); } </script> </body> </html>
-
启动后台服务,前端请求测试
注意:请求没有发送过去这个就是同源策略禁止读取远程资源怎么解决呢?
-
发现问题,解决问题(在我们的后端代码中加入一个配置类springboot项目为例)
@Component public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }
-
再次请求测试
这次完美成功
使用ajax不需要刷新页面依然能够做到动态的改变()
json简介
什么是json
-
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别广泛。
-
采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
json的语法格式
- 对象表示为键值对,数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
例:
{"name": "xiaoming"}
{"age": "3"}
{"sex": "男"}
json和JavaScript对象相互转换
JSON字符串转换为JavaScript 对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "你好", "b": "小明"}');
//结果是 {a: '你好', b: '小明'}
JavaScript 对象转换为JSON字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a: '你好', b: '小明'});
//结果是 '{"a": "你好", "b": "小明"}'
创建项目使用json格式返回
-
创建项目(以springboot项目为例)
-
导入依赖(除这个依赖还有一个阿里的也是同样的方法不过里面的方法名不同)
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.10.2</version> </dependency>
-
编写代码(首先编写一个实体类,将实体类对象封装成json字符串)
public class User { private Integer id ; private String name; private Integer age; //省略get、set、有参、无参、tostring }
public static void main(String[] args) throws JsonProcessingException { ObjectMapper mapper = new ObjectMapper(); User user = new User(1,"xiaoming",5); String userStr = mapper.writeValueAsString(user); System.out.println(user); //输出结果:User{id=1, name='xiaoming', age=5} System.out.println(userStr); //输出结果:{"id":1,"name":"xiaoming","age":5} }
//这样直接返回可能出现中文乱码问题 //在@RequestMapping添加一个参数produces ="application/json;charset=utf-8" //就能解决 @RequestMapping(value = "/getJson") @ResponseBody public String getJson() throws JsonProcessingException { ObjectMapper mapper = new ObjectMapper(); User user = new User(1,"xiaoming",5); String userStr = mapper.writeValueAsString(user); return userStr; } 返回结果和上面是一样的
json转换是时间的问题
public static void main(String[] args) throws JsonProcessingException { ObjectMapper mapper = new ObjectMapper(); Date date = new Date(); System.out.println(date); //输出结果:Tue Jun 16 19:20:00 CST 2020 System.out.println(mapper.writeValueAsString(date)); //输出结果:1592306400529 }
发现问题:返回了时间戳,格式并不是我们想要的
解决:
public static void main(String[] args) throws JsonProcessingException { ObjectMapper mapper = new ObjectMapper(); //不使用时间戳返回 mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false); //自定义时间格式 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); //指定日期格式 mapper.setDateFormat(sdf); Date date = new Date(); System.out.println(date); //输出结果:Tue Jun 16 19:29:44 CST 2020 System.out.println(mapper.writeValueAsString(date)); //输出结果:"2020-06-16 19:29:44" }
重复代码太多,编写工具类实现复用
public class JsonUtils { //返回时间 public static String getJsonTime(Object object) { return getJsonTime(object,"yyyy-MM-dd HH:mm:ss"); } public static String getJsonTime(Object object,String dateFormat) { ObjectMapper mapper = new ObjectMapper(); //不使用时间差的方式 mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false); //自定义日期格式对象 SimpleDateFormat sdf = new SimpleDateFormat(dateFormat); //指定日期格式 mapper.setDateFormat(sdf); try { return mapper.writeValueAsString(object); } catch (JsonProcessingException e) { e.printStackTrace(); } return null; } //返回json字符串 public static String getJson(Object object){ ObjectMapper mapper = new ObjectMapper(); try { return mapper.writeValueAsString(object); } catch (JsonProcessingException e) { e.printStackTrace(); } return null; } }
使用FastJson
Fastjson 是一个 Java 库,可以将 Java 对象转换为 JSON 格式,当然它也可以将 JSON 字符串转换为 Java 对象。
Fastjson 可以操作任何 Java 对象,即使是一些预先存在的没有源码的对象。
Fastjson 源码地址:https://github.com/alibaba/fastjson
Fastjson 中文 Wiki:https://github.com/alibaba/fastjson/wiki/Quick-Start-CN
-
导入fastjson依赖
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.68</version> </dependency>
-
代码测试
public static void main(String[] args) throws JsonProcessingException { User user1 = new User(1,"xiaoming",5); User user2 = new User(2,"xiaoming",6); User user3 = new User(3,"xiaoming",7); ArrayList<User> users = new ArrayList<>(); users.add(user1); users.add(user3); users.add(user2); //对象转json字符串 String str1 = JSON.toJSONString(user1); System.out.println("str1:"+str1); //输出结果:str1:{"age":5,"id":1,"name":"xiaoming"} //数组转字符串 String str2 = JSON.toJSONString(users); System.out.println("str2:"+str2); //输出结果:str2:[{"age":5,"id":1,"name":"xiaoming"}, //{"age":7,"id":3,"name":"xiaoming"}, //{"age":6,"id":2,"name":"xiaoming"}] //字符串转对象 JSONObject parse = JSON.parseObject(str1); Integer id =Integer.valueOf(parse.getString("id")); System.out.println("id:"+id); //输出结果:id:1 System.out.println("parse:"+parse); //输出结果:parse:{"name":"xiaoming","id":1,"age":5} //json对象转java对象 User t = JSON.toJavaObject(parse, User.class); System.out.println("t:"+t); //输出结果:t:User{id=1, name='xiaoming', age=5} }
第三种方法:使用HuTool工具类转换
JSON在现在的开发中做为跨平台的数据交换格式已经慢慢有替代XML的趋势(比如RestFul规范),我想大家在开发中对外提供接口也越来越多的使用JSON格式。
不可否认,现在优秀的JSON框架非常多,我经常使用的像阿里的FastJSON,Jackson等都是非常优秀的包,性能突出,简单易用。Hutool开始也并不想自己写一个JSON,但是在各种工具的封装中,发现JSON已经不可或缺,因此将json.org官方的JSON解析纳入其中,进行改造。在改造过程中,积极吸取其它类库优点,优化成员方法,抽象接口和类,最终形成Hutool-json。
来自官方文档
介绍 来自官方文档
Hutool-json的核心类只有两个:
- JSONObject
- JSONArray 这与其它JSON包是类似的,与此同时,还提供一个
JSONUtil
工具类用于简化针对JSON的各种操作和转换。
除了核心类,还提供了一些辅助类用于实现特定功能:
- JSONSupport Bean类继承此对象即可无缝转换为JSON或JSON字符串。同时实现了
toString()
方法可将当前对象输出为JSON字符串。 - XML 提供JSON与XML之间的快速转换,同时
JSONUtil
中有相应静态封装。 - JSON JSONObject和JSONArray共同实现的接口类,JSONUtil.parse方法默认返回此对象(因为不知道是JSON对象还是JSON数组),然后可以根据实际类型判断后转换对象类型。
与FastJSON类似,JSONObject实现了Map接口,JSONArray实现了List接口,这样我们便可以使用熟悉的API来操作JSON。
首先还是导入依赖:
<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.3.7</version> </dependency>
JSONUtil:
JSONUtil
是针对JSONObject和JSONArray的静态快捷方法集合,-
如何使用:parseXXX和toXXX
public static void main(String[] args) { User user1 = new User(1,"xiaoming",2); User user2 = new User(2,"xiao",3); User user3 = new User(3,"ming",4); ArrayList<User> users = new ArrayList<User>(); users.add(user1); users.add(user2); users.add(user3); String JsonStr1 = JSONUtil.toJsonStr(user1); String JsonStr2 = JSONUtil.toJsonStr(users); System.out.println("toJsonStr1:"+JsonStr1); //输出结果:toJsonStr1:{"name":"xiaoming","id":1,"age":2} System.out.println("toJsonStr2:"+JsonStr2); //输出结果:toJsonStr2:[{"name":"xiaoming","id":1,"age":2}, // {"name":"xiao","id":2,"age":3}, // {"name":"ming","id":3,"age":4}] JSONArray jsonArray = JSONUtil.parseArray(JsonStr2); System.out.println("jsonArray:"+jsonArray); //输出结果:jsonArray:[{"name":"xiaoming","id":1,"age":2}, // {"name":"xiao","id":2,"age":3}, // {"name":"ming","id":3,"age":4}] JSON parse = JSONUtil.parse(user1); System.out.println("parse:"+parse); //输出结果:parse:{"name":"xiaoming","id":1,"age":2} }
JSONObject
-
代表一个JSON中的键值对象,这个对象以大括号包围,每个键值对使用
,
隔开,键与值使用:
隔开,一个JSONObject类似于这样: -
创建:
JSONObject json1 = JSONUtil.createObj(); json1.putOnce("id","1"); json1.putOpt("name","xiaoming"); System.out.println("json1:"+json1); //输出结果:json1:{"name":"xiaoming","id":"1"} //JSONUtil.createObj()是快捷新建JSONObject的工具方法,同样我们可以直接new: JSONObject json1 = new JSONObject();
-
json1.putOnce
源码解释:/* * 一次性Put 键值对,如果key已经存在抛出异常,如果键值中有null值,忽略 * * @param key 键 * @param value 值对象,可以是以下类型: Boolean, Double, Integer, JSONArray, JSONObject, Long, String, or the JSONNull.NULL. * @return this. * @throws JSONException 值是无穷数字、键重复抛出异常 */
-
putOpt
源码解释:/** * 在键和值都为非空的情况下put到JSONObject中 * * @param key 键 * @param value 值对象,可以是以下类型: Boolean, Double, Integer, JSONArray, JSONObject, Long, String, or the JSONNull.NULL. * @return this. * @throws JSONException 值是无穷数字 */
-
-
转换
-
json字符串
User user1 = new User(1,"xiaoming",2); String JsonStr1 = JSONUtil.toJsonStr(user1); //方法一:使用工具类转换 JSONObject jsonObject = JSONUtil.parseObj(JsonStr1); System.out.println(jsonObject); //{"name":"xiaoming","id":1,"age":2} //方法二:new的方式转换 JSONObject jsonObject2 = new JSONObject(JsonStr1); System.out.println(jsonObject2); //{"name":"xiaoming","id":1,"age":2}
-
转换
User user1 = new User(1,"xiaoming",2); String JsonStr1 = JSONUtil.toJsonStr(user1); //方法一:使用工具类转换 JSONObject jsonObject = JSONUtil.parseObj(JsonStr1); System.out.println(jsonObject); //{"name":"xiaoming","id":1,"age":2} //方法二:new的方式转换 JSONObject jsonObject2 = new JSONObject(JsonStr1); System.out.println(jsonObject2); //{"name":"xiaoming","id":1,"age":2} JSONObject jsonObject1 = JSONUtil.parseObj(user1,false,true); // false表示不跳过空值,true表示保持有序
这里会有一个问题时间的转换,HuTool默认也是将时间输出为时间戳自定义需要使用:
json.setDateFormat("yyyy-MM-dd HH:mm:ss");
-
JSONArray
-
在JSON中,JSONArray代表一个数组,使用中括号包围,每个元素使用逗号隔开。
-
创建:
//方法1 JSONArray array = JSONUtil.createArray(); //方法2 JSONArray array = new JSONArray(); array.add("value1"); array.add("value2"); array.add("value3"); //转为JSONArray字符串 array.toString();
-
转换:
String jsonStr = "[\"value1\", \"value2\", \"value3\"]"; JSONArray array = JSONUtil.parseArray(jsonStr);
-