AJAX数据传递机制之JSON及JQuery对Ajax的封装

JSON简介

json是一种格式化字符串，说白了就是为了统一解析进行规范化的一种特殊字符串。用来作为在服务器端和客户端进行数据传递的桥梁，在服务器端把对象或集合转化为json字符串，在客户端进行解析json字符串转化为js对象。

三种转json字符串的方式

一、Google提供的GSON
1、基本数据类型+String类型
直接传递，不用转化
2、单个对象，数组，集合，带有引用类型的属性的对象

  Gson gson = new Gson();
  String json = gson.toJson(对象或集合名);

3、带有日期格式的对象，指定格式显示日期

User user  = new User(2, "jack", "123", new Date());
//对日期进行格式化，需要创建gson的构建器，通过构建器创建gson对象
  //使用构建器指定日期的格式化方法，或转化器
  GsonBuilder builder = new GsonBuilder();
  
  //方式1、格式化日期
  //builder.setDateFormat("yyyy-MM-dd");
  
  //方式2、注册转化器，参数1：需要转换的数据类型，参数2：转化器
  builder.registerTypeAdapter(Date.class, new MyDateConverter());
  
  Gson gson = builder.create();
  String json = gson.toJson(user);

注意：用方式2时，需要手动创建MyDateConverter类指定格式

public class MyDateConverter implements JsonSerializer<Date> { 
   public JsonElement serialize(Date date, Type arg1，
   JsonSerializationContext arg2) {

  //将Date转换成String
  SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
  String dateString = sdf.format(date);
  
  //通过ctrl+t查看类的继承结构，封装返回值
  return new JsonPrimitive(dateString);
 }
}

4、回环问题

A a = new A();
  a.setId(1);
  B b = new B();
  b.setName("bbb");
  //A和B互相为彼此的属性
  a.setB(b);
  b.setA(a);
  //生成一个构造器
  GsonBuilder builder = new GsonBuilder();
  //手动创建MyExclusionStrategy
  builder.setExclusionStrategies(new MyExclusionStrategy());
  //获得gson对象
  Gson gson = builder.create();
  String json = gson.toJson(a);

手动创建MyExclusionStrategy类

//定义排除策略，将B对象中的A属性排除掉
public class MyExclusionStrategy implements ExclusionStrategy {
 public boolean shouldSkipClass(Class<?> arg0) {
  return false;
 }
 public boolean shouldSkipField(FieldAttributes field) {
  //获得属性名称
  String name = field.getName();
  if("a".equals(name)){
   return true;
  }
  return false;
 }
}

二、阿里巴巴提供的FastJSON方法
相对于GSON来说，FastJson的使用比较简单，对于日期格式和回环问题都进行了封装。
1、单个对象，数组，集合，带有引用类型的属性的对象

//单个对象，{"id":1,"password":"123","username":"tom"}
/*
 * 如果生产json字符串时，需要修改属性名称，使用注解：@JSONField(name="name")
 * 还可以将对象转换成map，将map的key修改成需要的名称
 */
 String json = JSON.toJSONString(对象或集合名);

2、日期格式

//日期,默认获得从1970-1-1,0点到现在的毫秒数
//解决方式，在属性上添加注解：@JSONField(format="yyyy-MM-dd")
User user = new User(1, "tom", "123",new Date());
String json = JSON.toJSONString(user);

3、回环问题

/*回环问题
  *  1,fastjson自动解决方式：{"b":{"a":{"$ref":".."},"name":"bb"},"id":1}
  *  2，添加注解：@JSONField(serialize=false)//当前属性是否被序列化
 */
  A a = new A();
  a.setId(1);
  B b = new B();
  b.setName("bb");
  a.setB(b);
  b.setA(a);
  String json = JSON.toJSONString(a)；

三、国外使用的Jackson以后补充

JQuery对AJAX的封装

一、ajax方式
$.ajax({
type:请求方法，
get|posturl：请求地址
data：请求时携带的数据
datatype:服务端响应的数据类型，默认text，设置成json，直接返回js对象
success：function(data){},成功时回调该函数，data参数为服务端的响应的数据
});
封装前后参数的对应关系如下：
在这里插入图片描述

更简单的封装：
二、get和post方式
在这里插入图片描述
一个简单的关于省市县的三级联动的例题：

$(function(){
  //ajax方式获得省份
   $.ajax({
    type:"post",
    url:"/ajax_day1/p1/findProvince",
    success:function(data){
     var pros = JSON.parse(data);
     for(var i=0;i<pros.length;i++){
      $("#province").append("<option value="+pros[i].code+">"+pros[i].name+"</option>");
     }
    } 
   }); 
      //post方式根据省份获取市
   $("#province").change(function(){
    var provinceCode = $(this).val();
    //清空原有的数据
    $("#city").empty(); 
    $.post("/ajax_day1/p1/findCity",
            "provinceCode="+provinceCode,
      function(pros){
       for(var i=0;i<pros.length;i++){
        $("#city").append("<option value="+pros[i].code+">"+pros[i].name+"</option>");
       }
      },"json"
    );
   });
   //根据市获取区
   $("#city").change(function(){
    var cityCode = $(this).val();
    //清空原有的数据
    $("#area").empty(); 
    $.post("/ajax_day1/p1/findArea",
            "cityCode="+cityCode,
      function(cites){
       for(var i=0;i<cites.length;i++){
        $("#area").append("<option value="+cites[i].code+">"+cites[i].name+"</option>");
       }
      },"json"
    );
   });
  });