JavaWeb第九天

该文档是:JavaWeb学习

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

日期:2020-12-21

1. 什么是JSON

image-20201221210554067

2. JSON 在JavaScript 中的使用

2.1 json 的定义

json 是由键值对组成,并且由花括号(大括号)包围。每个键由引号引起来,键和值之间使用冒号进行分隔,多组键值对之间进行逗号进行分隔。

json 定义示例:

image-20201221215100772

2.2 json 的访问

json 本身是一个对象。
json 中的key 我们可以理解为是对象中的一个属性。
json 中的key 访问就跟访问对象的属性一样: json 对象.key
json 访问示例:

image-20201221215144531

2.3 json 的两个常用方法

image-20201222152955067

示例代码:

image-20201222153014225

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

image-20201222160051552

5. 原生AJAX 请求的示

image-20201222161758343

6. jQuery 中的AJAX 请求(重要)

$.ajax 方法:

image-20201222163715209

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 方法(常用):

image-20201222182841947

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 方法:

image-20201222183645719

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()方法:

serialize()可以把表单中所有表单项的内容都获取到,并以name=value&name=value 的形式进行拼接。

表单:

image-20201222184411559

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);
    });
});

结果:

image-20201222184512129

最后修改:2020 年 12 月 22 日 08 : 02 PM
如果觉得我的文章对你有用,请随意赞赏