jquery+ajax

2012-2013 大三上 software engineering project 小网银 Metro风格UI

用户登陆界面 表单提交用ajax实现与后台的交互 有遮罩层 用了960grid
以下仅仅为ajax

 <div class="grid_4" id="logIn"> 
    <form method="post" id="form" action="" name="logIn">
      <div class="f20 name">
        <input type="text" name="userName" id="user" value="username" onfocus="disappear(this);" onblur="disappear(this);">
      </div>
      <div class="clear"></div>
      <div class="f20 pw">
        <input name="pw" value="password" id="pass" onfocus="disappear(this);" onblur="disappear(this);">
      </div>
      <p id="confirm" class="f16"></p>
      <div class="clear"></div>
      <input type="submit" class="inputButton" id="close_1" value="">
    </form>
  </div>
  <script type="text/javascript"> 
    BtPopload("logIn");
    //BtPopHide("close_1","logIn") 
  </script>

#logIn{background-image: url(../img/loginBg-74.png);background-repeat: repeat;z-index: 99999;height:220px;}
.name{margin-left: 38px;margin-top: 40px;}
div.name input{color: #C0C0C0;}
.pw{margin-left: 38px;margin-top: 20px;color: #C8C8C8}
div.pw input{color: #C0C0C0;}
.inputButton{cursor: pointer;margin-top: 20px; margin-left: 80px;width: 130px;height: 35px;  border: 0px solid #dedede;-webkit-border-radius: 8px; border-radius:8px;background-image: url(../img/login-75.png); background-repeat: no-repeat;background-position: center;}
#confirm{color: #ff0000;margin-top: 10px;margin-left: 30px}

$(document).ready(function(){  //加载文档
    $("#form").submit(function(){  //当提交的时候 ajax 验证完就停止
        login();
        return false;
    });
});

function login(){
	var user= $("#user").val();   //获取文本框登陆用户值
	var pass=$("#pass").val();
	if(user=="username") {    //判断不为空
    $("#confirm").text("Username Cannot Be Vacant");
    $("#user").blur();
    return false;
  }
  if(pass=="password") {
    $("#confirm").text("Password Cannot Be Vacant");
    $("#pass").blur();
    //$("#pass").focus();
    return false;
  }
  $.post("php/login.class.php",{user:user,pass:pass},function(reponse){
  		if(reponse=="True"){
  			BtPopHide("close_1","logIn"); 
  		}
  		else
  			$("#confirm").text("Wrong Username or Password");
  });
}