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 "--登录失败！--";
         }
     }

效果展示：