AJAX 实现form表单提交

1.使用Ajax实现异步操作，点击登录按钮后，即触发form表单的提交事件，数据传输至后端

JSP：

<script type="text/javascript" src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/js/login.js"></script>



<form id = "form">
       <table align = "center">
           <tr>
               <td>用户名</td><td><input type = "text" id = "userName" name = "userName"></td>
           </tr>
           <tr>
               <td>密码</td><td><input type = "password" id = "userPwd" name = "userPwd"></td>
           </tr>
           <tr>
               <td align = "left"><input id = "submitbtn" type = "submit" value = "登录" style = "background-color: Cyan;color:blue"></td>
               <td align = "right" ><button style = "background-color: Cyan;color:blue"><a href = "/SSM/user/toRegister">注册</a></button></td>
           </tr>
       </table>
     </form>

js：

$(function(){
    $("#submitbtn").click(function(){
        login();
    })
})
function login(){
    var userName = $("#userName").val();//获取userName的值
    var userPwd = $("#userPwd").val();//获取userPwd的值
    $.ajax({
        url:"user/judgeLogin",
        type:"POST",
        data:{"userName":userName,"userPwd":userPwd},
        dataType:"json", 
success:function(returnData){ 
 alert(returnData);
 } 
 })
}

 js另一种传值方法：

function login(){
    $.ajax({
        url:"user/judgeLogin",
        type:"POST",
        data:$("#form").serialize(),//表单序列化
        dataType:"json",
        success:function(returnData){
            alert(returnData);
        }
    })
}

Controller层 接收：

    /**
     * 登录判断
     * @param userDto
     * @return
     */
    @ResponseBody
    @RequestMapping("/judgeLogin")
    public String judgeLogin(UserDto userDto) {
        int k = userService.judgeLogin(userDto);
        if(k > 0) {
            return "--登录成功！--";
        }else {
            return "--登录失败！--";
        }
    }

效果展示：