jquery+ajax

kmo

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"  >      </div>      <div class="clear"></div>      <div class="f20 pw">        <input name="pw" value="password" id="pass"  >      </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");  });}