JavaWeb第九天

该文档是：JavaWeb学习

博客连接：https://www.loveuluo.cn

日期：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);
    });
});

结果：