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"> </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");});}
页:
[1]