springmvc学习笔记——ajax请求的问题

Spring mvc

最近在使用spring mvc完成hosterWorld的课程项目，然而刚刚下手写一个登陆注册的功能就卡住了手，认真看一下是ajax请求的问题，代码中是这么调用的

login.jsp

<div class="login-form">
                    
class="am-form am-form-horizontal" id="user-login-form">

                        <div class="am-form-group">
                            class="am-form-label am-u-md-3">手机号
                            <div class="am-u-md-9">
                                class="form-control" id="phone" name="phone" type="text" placeholder="请输入手机号"/>
                            div>
                        div>

                        <div class="am-form-group">
                            class="am-form-label am-u-md-3">密码
                            <div class="am-u-md-9">
                                class="form-control" name="password" type="password" placeholder="请输入密码"/>
                            div>

                        div>
                        <div class="am-form-group">
                            "submit" id="user-login-btn" class="am-btn am-btn-primary am-btn-block" οnclick="userLogin()" value="登陆"/>
                        div>
                    
                    

                    
class="vertical-center">

                        还没有账号？
                        "button" class="btn-align-right" οnclick="callRegister()">我要注册
                    
                div>

jQuery

function userLogin(){
    alert("click login submit");
    $.ajax({
        type:'POST',
        url:'/auth/login',
        data:$('#user-login-form').serialize(),
        dataType: 'json',
        success:function (result) {
            alert("ajax success");
            alert(JSON.stringify(result));
            if(result["success"]==false){
                alert(result["error"]);
            }else{
                window.location.href="customer/home";
            }
        },
        error:function (result) {
            alert(JSON.stringify(result));
            exit();

        }
    });
}

controller

@RequestMapping("/auth/login")
    @ResponseBody
    public Map<String, Object> login(String phone, String password, HttpSession session){
        Map<String, Object> map = customerService.login(phone,password);
        if((Boolean)map.get("success")){
            session.setAttribute("cust_id",map.get("cust_id"));
            session.setAttribute("cust_phone",map.get("cust_phone"));
        }
        return map;
    }

明明看起来是没有什么问题的代码，jsp页面在表单提交的时候会调用userLogin函数，userLogin中会向/auth/login发送一个ajax请求，从对应url的controller中获取登陆信息，然而在运行过程中每次重新部署之后，第一次输入正确信息登陆时，服务器返回的状态码为200，但是却进入了ajax的error回调函数，难以理解，查到一篇jquery中ajax的debug方式，可参考http://www.cnblogs.com/me115/archive/2012/10/23/2734835.html
可以在error函数中打印错误信息，代码如下

error:function(errorStatus, xhr){
    alert("error"+JSON.stringify(errorStatus));
}

查看输出信息，可以看到每次输出error（即第一次deploy的时候）返回的alert信息都是

readystate:0, responsetext status:0, statustext:error

刚开始以为是controller中session的问题（springmvc菜鸟真是。。。），后来发现在springmvc中，controller是可以直接获取到页面的session、request等对象的，那么就不是这个问题了

在谷歌上抛上错误码查了一下，出现这个问题有两个可能的原因：
1. ajax跨域问题，
2. form表单提交的时候没有调用e.preventDefault()，这样的话，浏览器会在处理过程中提交表单或者跳转到请求的url去执行ajax代码，这个时候提交的表单或者链接会抢占资源，并立即终止request，返回readyState 0。
其实第二段我只是照着http://www.justinball.com/2013/02/25/jqxhr-returning-readystate-0-and-status-0/这里的翻译的，在我的调试过程中可以看到，当提交表单的时候浏览器会先发出一个http://localhost:8080/auth/login的请求，然后马上又发一个http://localhost:8080/?phone=xxxxpassword=xxxx，login的请求会报错，感觉可能就是因为提交表单的ajax请求抢占了login的请求，反正是一个很迷的东西

解决方案

在ajax请求结束之后调用e.preventDefault()，e代表这个事件，这个函数的作用就是可以让event绑定的默认响应事件被阻止，在jsp中onclick调用的函数方法中加入event参数即可

还是有很多不懂的东西，比如ajax跨域是什么，同源协议又是什么，为什么加入e.preventDefault就可以修正这个问题，之后还需要继续学习