又是这个谜之BUG……Ajax提交表单，提交前验证了数据，提交到servlet后就为Null了

Question

先来JSP表单代码

<form class="login-form" method="post">
        <input type="text" placeholder="用户名" id="loginUserName" name="loginUserName"/>
        <input type="password" placeholder="密码" id="loginUserPass" name="loginUserPass"/>
        <div><input style="width: 100px" type="text" placeholder="验证码" name="CodeCoreInputA" id="CodeCoreInputA"/><img id="CodeCore" onclick="loing()" style="margin-left: 20px;float: right;cursor: pointer;" src="CodeCore_ImageServlet" width="150px" height="47px;"></div>
        <button id="login">登　录</button>
        <p class="message">还没有账户? <a href="#">立刻创建</a></p>
      </form>

再是JS代码和Ajax

$(function(){
 $("#logon").click(function(){
  check_register();
 })
 $("#login").click(function(){
  var name=$("#loginUserName").val();
  var pass=$("#loginUserPass").val();
  var CodeCoreInput=$("#CodeCoreInputA").val();
  if(name!="" && name!=" "){
   if (pass!="" && pass!=" ") {
    if (CodeCoreInput!="" && CodeCoreInput!=" ") {
     Login();
    }else{
     $("#hello b").html("验证码不能为空");
     setTimeout(function(){
      $("#hello b").html("Hello! Please Login");
     },2000);
     $("#login_form").removeClass('shake_effect');  
     setTimeout(function()
       {
      $("#login_form").addClass('shake_effect')
       },1); 
    }
   }else{
    $("#hello b").html("密码不能为空");
    setTimeout(function(){
     $("#hello b").html("Hello! Please Login");
    },2000);
    $("#login_form").removeClass('shake_effect');  
    setTimeout(function()
      {
     $("#login_form").addClass('shake_effect')
      },1);  
   }
  }
  else
  {
   $("#hello b").html("用户名不能为空");
   setTimeout(function(){
    $("#hello b").html("Hello! Please Login");
   },2000);
   $("#login_form").removeClass('shake_effect');  
   setTimeout(function()
     {
    $("#login_form").addClass('shake_effect')
     },1);
  }
 })
 $('.message a').click(function () {
  $('form').animate({
   height: 'toggle',
   opacity: 'toggle'
  }, 'slow');
 });
})

最后是servlet代码

public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  PrintWriter out = response.getWriter();
  Object A = request.getParameter("loginUserName");
  Object B = request.getParameter("loginUserPass");
  Object C = request.getParameter("CodeCoreInputA");
  HttpSession session = request.getSession();
  Object Code = session.getAttribute("Code");
  if (C!=Code) {
   out.print("Code Over");
  }else{
   User_Logic UL = new User_Logic();
   String val = UL.login(A, B);
   out.print(val);
  }
 }
 
 
 function Login() {
 alert($(".login-form").serialize());
 $.ajax({
  type : "POST",
  url : "Core_UserLogin",
  data: $(".login-form").serialize(),
  success : function(data) {
   if(trim(data)=="DBA Over"){
    $("#hello b").html("数据库异常");
    setTimeout(function(){
     $("#hello b").html("Hello! Please Login");
    },1500);
    $("#CodeCoreInputA").val("");
    loing();
   }else if(trim(data)=="Account OR PassWord Over"){
    $("#hello b").html("用户名或密码错误");
    setTimeout(function(){
     $("#hello b").html("Hello! Please Login");
    },1500);
    $("#loginUserName").val("");
    $("#loginUserPass").val("");
    $("#CodeCoreInputA").val("");
    loing();
   }else if(trim(data)=="Code Over"){
    $("#hello b").html("验证码错误");
    setTimeout(function(){
     $("#hello b").html("Hello! Please Login");
    },1500);
    $("#CodeCoreInputA").val("");
    loing();
   }else if(trim(data)=="PassIsNull"){
    $("#hello b").html("欢迎回来"+data);
    setTimeout(function(){
     $("#hello b").html("正在跳转");
    },1500);
   }
  }
 });
 
}

取值全部为空，使用GET可用成功，但只要用到POST就死了……以前都是关机重启就好了，这次关了几次还是这样

Answer 1

代码写的真是够啰嗦的。。。。。。。。看着是没有什么问题，我觉得问题可能是出在那个 button上，因为你在form里只有一个button（当form里只有一个button时，且type不是reset时，这个button会默认为type是submit）,   所以当你点击button时就会默认提交form，你的form又没有写action，所以默认就是#，当form的action='#'时，提交就相当于提交到当前页面，也就是相当于刷新页面。所以就是你的ajax请求还没有发出去，页面就被刷新掉了。你可以试试把  <button id="login">登　录</button> 换成  <a href="javascript:;" id="login">登　录</a>

Answer 2

补充Ajax提交代码 上面忘记了function Login() {  alert($(".login-form").serialize());  $.ajax({   type : "POST",   url : "Core_UserLogin",   data: $(".login-form").serialize(),   success : function(data) {    if(trim(data)=="DBA Over"){     $("#hello b").html("数据库异常");     setTimeout(function(){      $("#hello b").html("Hello! Please Login");     },1500);     $("#CodeCoreInputA").val("");     loing();    }else if(trim(data)=="Account OR PassWord Over"){     $("#hello b").html("用户名或密码错误");     setTimeout(function(){      $("#hello b").html("Hello! Please Login");     },1500);     $("#loginUserName").val("");     $("#loginUserPass").val("");     $("#CodeCoreInputA").val("");     loing();    }else if(trim(data)=="Code Over"){     $("#hello b").html("验证码错误");     setTimeout(function(){      $("#hello b").html("Hello! Please Login");     },1500);     $("#CodeCoreInputA").val("");     loing();    }else if(trim(data)=="PassIsNull"){     $("#hello b").html("欢迎回来"+data);     setTimeout(function(){      $("#hello b").html("正在跳转");     },1500);    }   }  });   }