Ajax页面与SpringMVC中Controller的交互过程

2019/05/23 20:11

Ajax页面交互

	这里页面交互主要针对我们常用的页面JavaScript文件至SpringMVC中的Controller（页面控制器）内的交互过程，
主要讲Ajax针对Http协议的请求响应模型来进行页面交互的简单性讲解。

一、程序环境
前端技术：HTML、JavaScript、jQuery、Ajax
后端技术：SpringMVC
二、技术实现的资料文档
1、jQuery官网及常见操作
jQueryAPI中文文档：http://jquery.cuishifeng.cn/

三、实现流程
1、JavaScript中获取输入框信息与监听点击事件。
获取页面数据通常使用jQuery中的类选择器或id选择器进行元素选择，通过.val();.html();.text();.attr();等方法获取输入框的值。具体使用请参阅API手册。
事件的监听通常情况为点击事件或失去焦点事件。
2、Ajax请求发送流程。
①、ajax方法：

$.ajax({
    //请求服务器地址
    url: "showProvince",
    //请求方法
    type: "post",
    //请求数据类型
    dataType: "json",
    //默认为true-异步请求,false-同步请求
    async:true,
   //默认: true,dataType为script和jsonp时默认为false，false为不缓存此页面
   cache:true,
   success: function (data) {//回调函数
       通过Ajax回调函数获取服务器响应至客户端的数据，
       使用回调函数的参数data接收
   }
});

②、getJson()方法

$.getJSON("../addPet", {//请求的url
    id: $("#id").val()//请求的参数列表，采用key：value的方式
}, addPet);//回调函数名，注意是函数名，不加();
/*回调函数*/
function addPet(data) {
  通过Ajax回调函数获取服务器响应至客户端的数据，
       使用回调函数的参数data接收
}

3、Controller接收客户端数据。
服务器接收数据，可以自定义参数。
①、参数列表较少（约低于3个），可以在方法形参中直接写入前端数据传输中的key左右变量名，直接接收参数。
②、如果参数列表较多，可以单独建立一个Bean对象用于存放数据，Bean对象的属性名需要与key的名字一一对应。
前端ajax请求

$.getJSON("../addDiary", {
    title: $("#title").val(),
    weather: $("#weather").val(),
    content: $("#intro").val()
}, addDiary);

传输Bean对象

public class DiaryBean {
    /**标题*/
    private String title;
    /**天气*/
    private String weather;
    /**内容*/
    private String content;
}

Controller接收数据

@RequestMapping("addDiary")
public ResponseData addDiary(DiaryBean diaryBean) {
    ResponseData responseData = null;
    if (diaryService.addDiary(diaryBean) != 0) {
        responseData = ResponseData.ok();
    } else {
        responseData = ResponseData.notFound();
    }
    return responseData;
}

4、页面控制器如何将数据响应给客户端
①、响应数据，SpringMVC会自动将响应数据转化为Json格式的字符串，省掉原来Servlet中的Gson gson=new Gson();在通过gson.json(“数据”)；进行转化。
②、一般响应数据会统一进行封装，封装状态码Code和状态信息Message。其余的数据（包括字符串、对象、list集合等等）都通过封装对象的Map集合属性再进行封装。统一返回一个响应对象(一般使用ResponseData)。
5、客户端中如何解析响应数据。
客户端主要通过Ajax的回调函数进行数据解析。

/*回调函数*/
function addPet(data) {
  通过Ajax回调函数获取服务器响应至客户端的数据，
       使用回调函数的参数data接收
}

①、如果服务器响应的是字符串或数字，data等于响应数据的变量名，可以直接使用。
②、如果服务器响应的是对象，data等于响应对象的引用，通过data.属性名的方式获取对应属性的参数。
③、如果服务器响应的是list集合，data等于响应集合的变量名，通过data[index]获取集合中的元素，如果集合中保存的是对象，则可以通过data[index].属性名，获取对应的值。
④、如果服务器响应的是对象，对象的属性是Map集合，Map集合里面包含的是LIst集合，List集合里面包含的是对象信息。也就是我们常用的ResponseData封装数据对象方法。
如下图，需要取出对象信息，需要通过回调函数的data形参，然后.data（Map属性名），再.page（Map的key）获取Map的value（List集合），最后通过[index].name获取对应对象的属性。
例：

data.data.page.list[0].id=7;//连写方式。等同于下方4行代码：
    var mapObj=data.data;
    var mapValueObj=mapObj.page;
    var listObj=mapValueObj.list;
    var id=listObj[0].id;
    输出id：7；

PostMan响应截图；

个人经验，在对json数据格式的读取不熟悉时，建议可以先使用postMan获取响应数据，然后通过显示的Json格式字符串提取对应需要的数据。

ResponseData对象

public class ResponseData {
    /**响应状态码*/
    private int code =200;
    /**响应状态信息*/
    private String message="ok";
    /**响应数据*/
    private Map<String,Object>data=new HashMap<>();
    public static ResponseData ok(){
        return new ResponseData(200,"ok");
    }
    public static ResponseData notFound(){
        return new ResponseData(404,"notFound");
    }
    public static ResponseData unauthorized(){
        return new ResponseData(401,"unauthorized");
    }
    public ResponseData(int code, String message) {
        this.code = code;
        this.message = message;
    }
    public ResponseData() {
    }
}

6、如何将读取的数据写入HTML或进行页面跳转操作
写入数据通过读取数据的相对应的方法，进行数据写入。
通常使用的方法有：
①、.append("<p>值</p>"); //通常用于添加元素时使用。
②、 .attr("src","value"); //通常用于添加元素属性时使用。
③、.text("value"); //个人理解，一般用于添加文本标签的文本内容时使用。
④、.html("value"); //通常用于添加元素或元素内容时使用。