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);
-
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
