SpringMVC与ajax交互流程与实现

先上Controller和ajax的代码
Controller代码：

//@RequestMapping("")指的是路由根路径
@Controller
@RequestMapping("")
public class UserAction {

    private UserService userService;

    @Autowired
    public void setTransactionService(TransactionService userService) {
        this.userService= userService;
    }

//value = "/user"指的是路由路径定位到user，method指的是使用的post方法来接收数据，@ResponseBody指的是将返回值解析成json的http请求给发出请求的网页，@RequestBody指的是将http请求的输入值json解析成java对象发给服务器
    @RequestMapping(value = "/dologin", method = RequestMethod.POST)
    @ResponseBody
    public Object dologin(@RequestBody User user) {
        User result = userService.getUser(user.getUserName(), user.getPswd());
        return result;
    }

    //显示页面
    @RequestMapping("/info")
    public ModelAndView info() {
        ModelAndView mav = new ModelAndView();
        mav.setViewName("info.html");
        return mav;
    }
}

ajax代码：

$(document).ready(function() {
    var jsonData={
        userName: "test",
        pswd : "123456",
    };
    $.ajax({
        type: "post",
        url: "/dologin",
        dataType: 'json',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(jsonData),
        success: function (data) {
            console.log(data);
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
        }
    });
});

之前不太懂的时候代码经常卡住，比如说ajax和spring mvc的交互，同时显示页面，最开始想着一边返回界面一边把值就带着给页面了，然后值是ajax传过来的，但是这个思路是有问题的，ajax在前端，怎么能无缘无故就发过来数据呢，实际上的逻辑是这样的，首先根据路由调用显示页面的方法，然后在页面中插入js的ajax代码，发送数据到获取数据的路由上去，然后ajax得到数据，最后返回给页面，进行显示，彻底的完成前后端分离

具体交互流程图如下：

这里再提一下，如果不加@ResponseBody，返回值为String类型的话就是返回了一个只有字符串显示的界面，这个界面没有定位到任何服务器上的资源

根据上面的描述可以看出来，其实界面和数据获取是分开的，下一步工具就是设计RESTFUL结构，设计好之后把界面和数据操作分开

---