JavaWeb第九天
该文档是:JavaWeb学习
日期:2020-12-21
1. 什么是JSON
2. JSON 在JavaScript 中的使用
2.1 json 的定义
json 是由键值对组成,并且由花括号(大括号)包围。每个键由引号引起来,键和值之间使用冒号进行分隔,多组键值对之间进行逗号进行分隔。
json 定义示例:
2.2 json 的访问
json 本身是一个对象。
json 中的key 我们可以理解为是对象中的一个属性。
json 中的key 访问就跟访问对象的属性一样: json 对象.key
json 访问示例:
2.3 json 的两个常用方法
示例代码:
3. JSON 在java 中的使用
我们要使用json 和java 中使用,我们需要使用到一个第三方的包。它就是gson.jar。
Gson 是Google 提供的用来在Java 对象和JSON 数据之间进行映射的Java 类库。可以将一个JSON字符串转成一个Java 对象,或者反过来。
json 在java 中的操作。常见的有三种情况:
1、java 对象和json 的转换
2、java 对象list 集合和json 的转换
3、map 对象和json 的转换
代码:
public class GsonTest {
static class Person {
private int age;
private String name;
public Person() {
// TODO Auto-generated constructor stub
}
public Person(int age, String name) {
this.age = age;
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Person [age=" + age + ", name=" + name + "]";
}
}
// 要把复杂的json 字符串转换成为java 对象。需要继承TypeToken 类。
// 并把返回的类型当成TypeToken 的泛型注入
static class PersonType extends TypeToken<List<Person>> {
}
public static void main(String[] args) {
// json 操作,一定要先new 一个gson 对象。
Gson gson = new Gson();
// java 对象--json
Person person = new Person(12, "wzg168");
// 把对象转成为json 字符串
String personjson = gson.toJson(person);
System.out.println(personjson);
// 把json 字符串转换成为java 对象
Person p = gson.fromJson(personjson, Person.class);
System.out.println(p);
System.out.println("------------------------------------------");
// 2、java 对象list 集合和json 的转换
List<Person> list = new ArrayList<Person>();
for (int i = 0; i < 3; i++) {
list.add(new Person(10 * i, "name-" + i));
}
String jsonListString = gson.toJson(list);
System.out.println(jsonListString);
// 把json 数组转换成为List 对象
// List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());
// 我们也可以使用匿名内部类
List<Person> ps = gson.fromJson(jsonListString, new TypeToken<List<Person>>() {
}.getType());
System.out.println(ps);
System.out.println("------------------------------------------");
// 3、map 对象和json 的转换
Map<String, Person> mapPerson = new HashMap<String, GsonTest.Person>();
// 添加person 到map 中
mapPerson.put("p1", new Person(1, "person-1"));
mapPerson.put("p2", new Person(2, "person-2"));
// 把map 转换成为json 对象
String jsonMapString = gson.toJson(mapPerson);
System.out.println(jsonMapString);
// 通过使用匿名内部类的方式
Map<String, Person> map = gson.fromJson(jsonMapString,
new TypeToken<HashMap<String, Person>>() {}.getType());
System.out.println(map);
}
}
4. 什么是AJAX
5. 原生AJAX 请求的示
6. jQuery 中的AJAX 请求(重要)
$.ajax 方法:
AjaxServlet:
public void jQueryAjax(HttpServletRequest req,HttpServletResponse res) throws IOException {
System.out.println("jQueryAjax方法执行了。");
// json 操作,一定要先new 一个gson 对象。
Gson gson=new Gson();
// java 对象--json
Person person=new Person(1,"曹新千");
// 把对象转成为json 字符串
String personJson = gson.toJson(person, Person.class);
// 把数据写回去
res.getWriter().write(personJson);
}
html页面代码:
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/16_ajax/ajaxServlet",//请求的地址
// data:"action=jQueryAjax" 这种也可以
data:{action:"jQueryAjax"}, //这个也可以(发送给服务器的数据)
success:function (data) { //data代表响应回来的参数,然后function代表要做什么
/* var jsonObj = JSON.parse(data);手动转成Json对象
$("#msg").html("编号:" + jsonObj.id + " , 姓名:" + jsonObj.name);获取json对象的数据 */
$("#msg").html("编号:" + data.id + " , 姓名:" + data.name);
},
// dataType:"text" 如果这里填写的是text,那么发过来的json字符串要手动转换成json对象
dataType:"json" //自动将json字符串(就是上边的data)转化为json对象
}
);
});
$.get 方法和$.post 方法(常用):
html页面代码:
// ajax--get 请求
$("#getBtn").click(function(){
//url,data,callback,type
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);
},"json");
});
// ajax--post请求
$("#postBtn").click(function(){
//url,data,callback,type
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
},"json");
});
$.getJSON 方法:
html页面代码:
// ajax--getJson请求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);
});
});
表单序列化serialize()方法:
表单:
AjaxServlet:
protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(" jQuerySerialize == 方法调用了");
System.out.println("用户名:" + req.getParameter("username"));
System.out.println("密码:" + req.getParameter("password"));
Person person = new Person(1, "国哥");
// json格式的字符串
Gson gson = new Gson();
String personJsonString = gson.toJson(person);
resp.getWriter().write(personJsonString);
}
html页面代码:
// ajax请求
$("#submit").click(function(){
alert($("#form01").serialize()) //name=value&name=value
// 把参数序列化
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", //url
"action=jQuerySerialize&" +$("#form01").serialize(), //data
function (data) { //回调函数
$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
});
});
结果: