JSON和AJAX学习
1、Json
1.1、什么是Json
- JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。
- 易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式.。
- json 是一种轻量级的数据交换格式。
- 轻量级指的是跟 xml 做比较。 数据交换指的是客户端和服务器之间业务数据的传递格式。
1.2、JSON 在 JavaScript 中的使用。
- json 是由键值对组成,并且由花括号(大括号)包围。
- 每个键由引号引起来,键和值之间使用冒号进行分隔, 多组键值对之间进行逗号进行分隔。
var json = {
"key1":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
"key5_1" : 551,
"key5_2" : "key5_2_value"
},
"key6":[{
"key6_1_1":6611,
"key6_1_2":"key6_1_2_value"
},{
"key6_2_1":6621,
"key6_2_2":"key6_2_2_value"
}]
};
- json 本身是一个对象。
- json 中的 key 我们可以理解为是对象中的一个属性。
- json 中的 key 访问就跟访问对象的属性一样: json 对象.key
1.2.1、json常用的两种方法
- JSON.stringify() 把 json 对象转换成为 json 字符串
- JSON.parse() 把 json 字符串转换成为 json 对象(JavaScript对象)
var jsonstr = JSON.stringify({"a":"Hello","b":"world"});
//结果是 '{a: 'Hello', b: 'World'}'
var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}
1.3、Json在java中的使用
1.3.1、使用gson解析json
-
Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。
-
可以将一个 JSON 字符串转成一个 Java 对象,反之亦然。
-
Gson提供了fromJson() 和toJson() 两个直接用于解析和生成的方法
-
fromJson实现反序列化
-
toJson实现了序列化
使用gson首先导入gson的jar包
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency>
pojo实体类
public class User {
private int age;
private String name;
public User() {
}
public User(int age, String name) {
this.age = age;
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
return "User{" +
"age=" + age +
", name='" + name + '\'' +
'}';
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
@Test
public void test1(){
User user = new Person(16,"小明");
// 创建 Gson 对象实例
Gson gson = new Gson();
// toJson 方法可以把 java 对象转换成为 json 字符串
String userJsonString = gson.toJson(user);
System.out.println(userJsonString);// {"age":16,"name":"小明"}
// fromJson 把 json 字符串转换回 Java 对象
// 第一个参数是 json 字符串
// 第二个参数是转换回去的 Java 对象类型
User user = gson.fromJson(userJsonString, user.class);
System.out.println(user);//User{age=16, name='小明'}
}
List和json的转换
@Test
public void test2() {
List<User> userList = new ArrayList<User>();
userList.add(new User(16, "张三"));
userList.add(new User(18, "李四"));
Gson gson = new Gson();
//把 List 转换为 json 字符串
String userListJsonString = gson.toJson(userList);
System.out.println(userListJsonString);// //[{"age":16,"name":"张三"},{"age":18,"name":"李四"}]
System.out.println("==================");
List<User> list = gson.fromJson(userListJsonString, new TypeToken<List<User>>(){}.getType());
System.out.println(list);//[User{age=16, name='张三'}, User{age=18, name='李四'}]
}
Map和json的转换
@Test
public void test3(){
Map<Integer,User> userMap = new HashMap<Integer, User>();
userMap.put(1, new User(19, "赵六"));
userMap.put(2, new User(18, "孙七"));
Gson gson = new Gson();
// 把 map 集合转换成为 json 字符串
String userMapJsonString = gson.toJson(userMap);
System.out.println(userMapJsonString);//{"1":{"age":19,"name":"赵六"},"2":{"age":18,"name":"孙七"}}
System.out.println("--------------------------------------------");
Map<Integer,User> userMap1 = gson.fromJson(userMapJsonString, new
TypeToken<HashMap<Integer,User>>(){}.getType());
System.out.println(userMap1);//{1=User{age=19, name='赵六'}, 2=User{age=18, name='孙七'}}
User user = userMap1.get(1);
System.out.println(user);//User{age=19, name='赵六'}
}
1.3.2、使用Jackson解析json
导入Jackson的依赖
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.2</version>
</dependency>
@Test
public void test04() throws JsonProcessingException {
//创建一个jackson的对象映射器,用来解析数据
ObjectMapper mapper = new ObjectMapper();
//创建一个对象
User user = new User(19,"王麻子");
//将我们的对象解析成为json格式
String str = mapper.writeValueAsString(user);
System.out.println(str);//{"age":19,"name":"王麻子"}
}
}
1.3.3、使用FastJson解析json
导入FastJson的依赖
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.70</version>
</dependency>
-
JSON
- JSON代表 JSONObject和JSONArray的转化
-
JSONArray
- JSONArray 代表 json 对象数组
-
JSONObject
- JSONObject 代表 json 对象
- JSON类之parseObject()方法,实现json字符串转换为json对象或javabean对象
- JSON类之toJSONString()方法,实现json对象转化为json字符串和javabean对象转化为json 字符串
可以自己测试一下 跟上面Jackson gson差不多
2、AJAX
2.1、什么是AJAX
- AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),就是异步的 JS 和 XML。
- 是指一种创建交互式网页应用的网页开发 技术。 ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。
- Ajax 请求的局部更新,浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容 也就是无刷新获取数据
- AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
优点:
- 可以无需刷新页面而与服务器端进行通信。
- 允许你根据用户事件来更新部分页面内容。
模范Ajax效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>
<script type="text/javascript">
function LoadPage(){
var targetUrl = document.getElementById('url').value;
console.log(targetUrl);
// 从输入框中获取地址 动态加载
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.baidu.com/"/>
<!--当点击提交时 调用LoadPage方法 获取要加载的地址-->
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置:</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>
效果
2.2、jQuery 中的 AJAX
2.2.1、$.ajax 方法
-
url 表示请求的地址
-
type 表示请求的类型 GET 或 POST 请求
-
data 表示发送给服务器的数据 格式有两种:
- name=value&name=value
- {key:value}
-
success 请求成功,响应的回调函数
-
dataType 响应的数据类型
常用的数据类型有text 表示纯文本 xml 表示 xml 数据 json 表示 json 对象
2.2.2、get和post请求
-
$.get/post(url, [data], [callback], [type])
-
url:请求的 URL 地址。
-
data:请求携带的参数。
-
callback:载入成功时回调函数。
-
type:设置返回内容格式,xml, html, script, json, text, _default。
使用ajax实现用户登录提示功能
@RequestMapping("/ajax")
public String ajaxTest(String name,String pwd){
String msg = "";
//在数据库中查找数据与前端用户输入的数据比较
if (name!=null){
if ("admin".equals(name)){//这里将数据写死了 实际上是从数据库中查找
msg = "OK";
}else {
msg = "用户名输入错误";
}
}
if (pwd!=null){
if ("123456".equals(pwd)){
msg = "OK";
}else {
msg = "密码输入有误";
}
}
return msg;
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<%--导入jquery库--%>
<script src="*****"></script>
<script>
function name(){
$.post({
url:"${pageContext.request.contextPath}/ajax",
data:{'name':$("#name").val()},
success:function (data) {
if (data.toString()=='OK'){
$("#userInfo").css("color","green");
}else {
$("#userInfo").css("color","red");
}
$("#userInfo").html(data);
}
});
}
function password(){
$.post({
url:"${pageContext.request.contextPath}/ajax",
data:{'pwd':$("#pwd").val()},
success:function (data) {
if (data.toString()=='OK'){
$("#pwdInfo").css("color","green");
}else {
$("#pwdInfo").css("color","red");
}
$("#pwdInfo").html(data);
}
});
}
</script>
</head>
<body>
<p>
用户名:<input type="text" id="name" οnblur="name()"/>
<span id="userInfo"></span>
</p>
<p>
密码:<input type="text" id="pwd" οnblur="password()"/>
<span id="pwdInfo"></span>
</p>
</body>
</html>
可以自己网上查阅资料学习AJAX和JSON
建议学习AJAX和JSON学习视频 B站:尚硅谷AJAX 或者 狂神说java
谢谢大家的阅读! 若上面有写错的 欢迎纠正哦