Json

json是一种轻量级的数据交换格式。json采用完全独立于语言的文本格式
json 是由键值对组成，并且由大括号包围。每个键由引号引起来，键和值之间使用冒号进行分隔， 多组键值对之间进行逗号进行分隔

json 的两个常用方法

json 的存在有两种形式
json 对象：对象的形式存在

  1. var jsonObject = {"k1":"v1","k2":"v2","k3":"v3"}; //定义对象格式json
  2. console.log(jsonObject.k1); //取出键k1对应的值

json 字符串：字符串的形式存在

  1. var jsonArray = ["元素1","元素2","元素3"]; //定义数组格式json
  2. console.log(jsonArray[0]); //访问json数组的元素
  3. for(var i = 0 ; i < jsonArray.length ; i++){
  4.     console.log(jsonArray[i]); //遍历数组,访问每个元素
  5. }

JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 json 对象
一般我们要操作 json 中的数据的时候，需要 json 对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。

  1. // 把 json 对象转换成为 json 字符串
  2. var jsonObjString = JSON.stringify(jsonObj); 
  3. alert(jsonObjString)
  5. // 把 json 字符串。转换成为 json 对象
  6. var jsonObj2 = JSON.parse(jsonObjString);
  7. alert(jsonObj2.key1);// 12
  8. alert(jsonObj2.key2);// abc

JSON 在 java 中的使用

使用gson jar包转换

  1. //javaBean 和 json 的互转
  2. @Test
  3. public  void test1(){
  4.     Person person = new Person("h", null, null, null);
  5.     Gson gson = new Gson();
  6.     //toJson方法把java对象转换成json字符串
  7.     String s = gson.toJson(person);
  8.     System.out.println(s);
  9.     //fromJson把json字符串转换为java对象
  10.     Person person1 = gson.fromJson(s, Person.class);
  11.     System.out.println(person1);
  12. }

list/map的类型转换json

  1. public class personListType extends TypeToken<ArrayList<Person>> {
  2. }
  1. //list和json的转换
  2. public  void test2(){
  3.     List<Person> plist=new ArrayList<>();
  4.     plist.add(new Person("h", null, null, null));
  5.     plist.add(new Person("h2", null, null, null));
  7.     Gson gson=new Gson();
  8.     String s = gson.toJson(plist);
  9.     System.out.println(s);
  11.     List<Person> plist2=gson.fromJson(s,List.class);
  12.     System.out.println(plist2);
  13.     Person p1=plist2.get(0);
  14.     System.out.println(p1);
  15. }
  1. //map和json的转换
  2. public  void test3(){
  3.     Map<Integer,Person> map=new HashMap();
  4.     map.put(1, new Person("h", null, null, null));
  5.     map.put(2, new Person("h2", null, null, null));
  6.     map.put(3, new Person("h3", null, null, null));
  8.     Gson gson=new Gson();
  9.     String s = gson.toJson(map);
  10.     System.out.println(s);
  12.     Map<Integer,Person> map1= gson.fromJson(s, new personListType().getType());
  14.     //法二 使用匿名内部类  推荐
  15.     //Map<Integer,Person> map1= gson.fromJson(s, 
  16.     new TypeToken<Map<Integer,Person>>(){}.getType());        
  18.     System.out.println(map1);
  19. }

注：list/map的类型转换需要用到TypeToken反射类 一般使用匿名内部类 将其封装

Ajax请求

ajax是指一种创建交互式网页应用的网页开发技术。 ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术

  1. //原生ajax请求  不使用
  2. function ajaxRequest() {
  3.     //1、我们首先要创建XMLHttpRequest 
  4.     var xmlHttprequest = new XMLHttpRequest();
  5.     //2、调用open方法设置请求参数 规定请求的类型、url以及是否是异步处理请求
  6.     xmlHttprequest.open("get","http://localhost:8080/Testjsp/ajaxServlet?action=jsAjax",true);
  7.     //4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
  8.     xmlHttprequest.onreadystatechange=function (){
  9.         if(xmlHttprequest.readyState == 4 && xmlHttprequest.status==200){
  10.             //转换json字符串为json对象 调出需要的字段
  11.             var parseobj = JSON.parse(xmlHttprequest.responseText);
  12.             //把响应的数据显示在页面上
  13.             document.getElementById("div01").innerText="姓名:"+parseobj.name;
  14.         }
  15.     }
  16.     //3、调用send方法发送请求
  17.     xmlHttprequest.send()
  18.     }

XMLHttpRequest 对象的responseText/responseXml 可获取来自服务器的响应

onreadystatechange事件
属性readystate有XMLHttpRequest 的状态信息

存有XMLHttpRequest的状态。从0到4发生变化

  • 0: 请求未初始化
  • 1:服务器连接已建立
  • 2:请求已接收
  • 3:请求处理中
  • 4:请求已完成，且响应已就绪

注：Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容

jQuery 中的 AJAX 请求 使用

$.ajax 方法
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种：
一：name=value&name=value
二：{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型
常用的数据类型有：
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象

  1. //ajax请求
  2. $("#ajaxBtn").click(function(){
  3.     $.ajax({
  4.         url:"http://localhost:8080/Testjsp/ajaxServlet",
  5.         data:"action=jqueryAjax",
  6.         type:"get",
  7.         success:function (data){//传入参数 可以直接调用数据 不用在responseText中提取
  8.             // var parse = JSON.parse(data);
  9.             $("#msg").html("编号："+data.id+"姓名："+data.name)
  10.             },
  11.         dataType:"json"        //用json类型不用再转一次json对象
  12.         });
  13. });

$.get 方法和$.post 方法
url 请求的 url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型

  1. // ajax--get请求/post请求同理
  2. $("#getBtn").click(function(){
  3.     $.get("http://localhost:8080/Testjsp/ajaxServlet",
  4.           "action=jqueryGet",
  5.           function (data){
  6.               $("#msg").html("get编号："+data.id+"姓名："+data.name)
  7.               }, "json"
  8.          );
  9. });

$.getJSON 方法
url 请求的 url 地址
data 发送给服eee务器的数据
callback 成功的回调函数

  1. // ajax--getJson请求
  2. $("#getJSONBtn").click(function(){
  3.     // 调用
  4.     $.getJSON("http://localhost:8080/Testjsp/ajaxServlet",
  5.               "action=jqueryGetJSON",
  6.               function (data){
  7.                   $("#msg").html("jqueryGetJSON编号："+data.id+"姓名："+data.name)
  8.                   }
  9.              );
  10. });

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

  1. // 把参数序列化
  2. // $("#form01").serialize() 整个表单的数据
  3. $.getJSON("http://localhost:8080/Testjsp/ajaxServlet",
  4.           "action=jquerySerialize&"+$("#form01").serialize(),
  5.           function (data){
  6.               $("#msg").html("serialize编号："+data.id+"姓名："+data.name)
  7.               }
  8.          );


注：response.getWriter().write(）和 response.getWriter().print(）的区别
response.getWriter()返回的是PrintWriter，这是一个打印输出流

response.getWriter().write(）和 response.getWriter().print(）是响应给客户端的东西，如果不用ajax接收将数据放在合适的位置，就会在浏览器上生成一个新的页面来显示内容。

print
response.getWriter().print(),不仅可以打印输出文本格式的（包括html标签），还可以将一个对象以默认的编码方式转换为二进制字节输出

writer
response.getWriter().writer(),只能打印输出文本格式的（包括html标签），不可以打印对象