前言

说起前后台交互，同步，异步，Ajax一套一套的，自己一操作就错，可谓是人间真实。于是乎写个博客记录一下，加深印象。目前前后端分离是主流，JavaScript的日益繁荣，一些后端模板引擎其实没多大用处，就算前后端不分离，我们依然可以用全异步进行交互，后台只用来拦截路由以及输出页面，页面中的数据可以全部通过Ajax来获取。这种方式是主流的，JS的性能以及语法在处理页面中不输后端语言了。至于前后端完全分离，也不是不行，看项目，看钱呗只要你JS玩的六，前后端分不分离，不重要，你可以做到视图和数据分离。归功与Ajax十分好用，也归功于js引擎性能的提升（除了IE6,7）这种非人使用的浏览器。

碎碎念

先从前台说起吧，前台发送Ajax请求，这里就使用Jquery封装的Ajax来操作。

首先，我们知道，前后台数据交互的数据格式。常用的只有三种，表单数据，JSON数据，文件数据。SpringMVC接收这三种数据的方式也是不同的，说起不同，其实也就是方法形参不同，亦或加一个注解的事。

使用Jquery封装的Ajax发送数据

不是百分百原创，我也不盈利，我也是看了好多博客一点一点（博客鬼裁）总结出来的，有些内容我是凭印象写的，但大部分我是实践过的，网上资源多是多，但难找啊，好不容易找到了，又是一些很旧的的版本的了，我是学习的，框架，依赖，我下意识的用的都是最新的，就算不是最新的，也会是非常稳定的。

baba完了，进入正文。

$.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为”jQuery中Ajax系列方法之母”。

形式：$.ajax({name:val, name:val,...});

可选字段：

• url：链接地址，字符串表示
• data：需发送到服务器的数据，GET，POST，put,delete都可以，格式为{A: ‘…’, B: ‘…’}，在contentType为”application/json”时data必须要为JSON数据，这时我们要使用JSON.stringify({A: ‘…’,B: ‘…’})来把普通对象转为JSON格式的数据。
• type：”POST“，”GET“，”PUT“,”DELETE“,请求类型不分大小写
• timeout: 请求超时时间，单位为毫秒，数值表示
• cache：是否缓存请求结果，bool表示
• contentType：内容类型，默认为”application/x-www-form-urlencoded”，需要发送JSON数据时则为”application/json”, 在发送文件数据时，要设为false布尔类型，无需设置请求头
• processData: 是否将将数据序列化，除了在发送文件时需要设为false，其他情况不需要设置此属性。
• dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json,除特殊情况，一般无需设置。
• success：请求成功后，服务器回调的函数，
• error：请求失败后，服务器回调的函数
• complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
• async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

举个栗子：

$.ajax({
    url: "/greet",
    data: JSON.stringify({name: 'jenny'}),
    type: "POST",
	contentType: 'application/json'
    success: function(data) {
        // data就是mvc回传给前台的数据。是个JS对象。
    }
});

$.post()

该方法使用POST方式执行Ajax请求，从服务器加载数据。

形式：$.post(url, data, func, dataType);
可选参数：

• url：链接地址，字符串表示
• data：需要发送到服务器的数据，格式为{A: '...', B: '...'}
• func：请求成功后，服务器回调的函数；function(data, status, xhr)，其中data为服务器回传的数据，status为响应状态，xhr为XMLHttpRequest对象，个人感觉关注data参数即可
• dataType：服务器返回数据的格式

举个栗子

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.get()

该方法使用GET方式执行Ajax请求，从服务器加载数据。

形式：$.get(url, data, func, dataType);
其各个参数所示意义与$.post()一致，在此不再列出，唯一区别就是请求类型是GET。

举个栗子

$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.getJSON()

该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。

形式：$.getJSON(url, data, func);

因为确定服务器返回json编码的数据，故相较于$.get()不必再指定dataType。

举个栗子

$.getJSON(
    "/greet",
    {name: 'jenny'},
    function(data) {
        ...
    }
);

上面就是几种常见的，除了文件上传和发送JSON数据时注意一下，其他的不需要过多的配置

使用SpringMVC接收数据

为了方便，这里我是用springboot来构建一个服务端，用来演示springMVC接收数据。

说的再多，不如上代码。代码里面有注释。

@RestController
public class TestController {


    /**
     * 这是普通的获取url中的数据，
     * 如请求为
     * user/1
     * user/2
     * user/3
     * 等等，都会进入这个方法，方法参数就是user/后面的值。
     * ps这种方法据说性能很差，所以一般不建议这么搞
     */
    @RequestMapping("/user/{id}")
    public Map<String,Object> get1(@PathVariable String id){
        return null;
    }

    /**
     * 这一般用来获取普通的表单数据，这是基本类型
     * 前台发送的Ajax
     * $.ajax({
     *     url: "/user",
     *     data: {id: '231},
     *     type: "get",
     *     success: function(data) {
     *         // data就是mvc回传给前台的数据。是个JS对象。
     *     }
     * });
     *
     */
    @RequestMapping("/user")
    public Map<String, Object> get2(String id){
        // 这个id就是获取请求中的id的值
        return null;
    }

    /**
     * 上面时基本类型，有时我们需要接收的一个对象类型的数据，也就是引用类型。
     * SpringMVC也很方便
     * $.ajax({
     *     url: "/user",
     *     data: {id: '231',name:'小王',age: 23},
     *     type: "get",
     *     success: function(data) {
     *         // data就是mvc回传给前台的数据。是个JS对象。
     *     }
     * });
     * 只要引用类型的属性名和前台传送的键对应上，就能进行封装，这是表单数据。
     */
    @RequestMapping("/user")
    public Map<String, Object> get3(User user){
        return null;
    }

    /**
     * 如何接收JSON数据，
     * $.ajax({
     *     url: "/greet",
     *     data: JSON.stringify({id: '231',name:'小王',age: 23}),
     *     type: "POST",
     * 	   contentType: 'application/json'
     *     success: function(data) {
     *         // data就是mvc回传给前台的数据。是个JS对象。
     *     }
     * });
     * 
     * 这个Ajax发送的就是JSON数据，和上面的data：{}不一样，
     * springMVC接收JSON数据，需要在参数上加一个@RequestBody注解即可，封装逻辑也是属性名对应JSON的键名。
     * 这里我多说两句，建议集合类型，以及复杂的对象，什么叫复杂的对象呢，属性名超过3个以上的JSON对象，在前后台交互时都采用JSON格式。
     * 性能好，还稳定
     * 
     */
    @RequestMapping("/user")
    public Map<String,Object> get4(@RequestBody User user){
        return null;
    }

    /**
     * 文件上传就用这个方法参数接收，文件上传，我在写一篇博客，都不一定说的完。
     */
    @RequestMapping("/user")
    public Map<String,Object> get5(MultipartFile multipartFile){
        return null;
    }
}
// 这里使用了Lombok，害虽说意识中不想使用这东西，但是，咋说呢，香呗，希望JDK早点更新自带这玩意就好了。不过目前来看，只是时间问题而已。
@Data
class User{
    private Integer id;
    private String name;
    private Integer age;
}

好了，也写完了，风格慢慢形成，废话还是一点一点在变多啊。

世人皆论你风趣幽默 却未曾见你手捧星辰对我说我们互相拯救。

网抑时刻

封面原图

想在博客里面整些不一样的，但再想想，没有必要，花里胡哨没啥用，酒好也怕巷子深，我这酒也不咋滴啊，不怕。