一、程序环境 前端技术：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"); //通常用于添加元素或元素内容时使用。
