今天成功测试一种js登录特效+ajax提交表单+异步刷新验证，登录时特效提醒，无刷新ajax提交表单，获取验证结果，跳转正式页面：废话不多说，先直接分享代码：
1、主界面index.php 加载的这两项，网上可以下载
<script type="text/javascript" src="/keshe/js/jquery.min.js"></script>
<script type="text/javascript" src="/keshe/js/jquery.form.js"></script><?php
session_start();
$_SESSION['user']=null;
?>
<!DOCTYPE HTML>
<html>
<head>
<title>雏出宾馆客房管理系统</title>
<meta charset="UTF-8">
<script type="text/javascript" src="/keshe/js/jquery.min.js"></script>
<script type="text/javascript" src="/keshe/js/jquery.form.js"></script>
<script type="text/javascript" src="/keshe/js/tooltips.js"></script>
<script type="text/javascript">
//支持Enter键登录
document.onkeydown = function(e){
if(!e) e = window.event;
if((e.keyCode || e.which) == 13){
var obtnLogin=document.getElementById("submit_btn")
obtnLogin.focus();
}
}
$(function(){
//提交表单
$('#submit_btn').click(function(){
show_loading();
//var myReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //正则
if($('.user').val() == ''){
show_err_msg('账号还没填呢！');
$('.user').focus();
}else if($('.password').val() == ''){
show_err_msg('密码还没填呢！');
$('.password').focus();
}else{
//ajax提交表单
$.post(
'access.php',
{
username:$("#input1").val(),
age:$("#input2").val(),
},
function (data) { //回调函数
if(data=='1'){
show_msg('登录成功，正在为您跳转...','index');
}else if(data=='2'){
show_err_msg('密码输入错误！');
$('.password').focus();
}else if(data=='3'){
show_err_msg('该用户不存在！');
$('.user').focus();
}
}
);
//show_msg('正在登陆...');
//ajax提交表单，#login_form为表单的ID。 如：$('#login_form').ajaxSubmit(function(data) { ... });
//show_msg('登录成功咯！ 正在为您跳转...','http://www.hpu.edu.cn');
}
});
});
</script>
<style type="text/css">
* html,* html body{background-image:url(about:blank);background-attachment:fixed;}
html{color:#000;background-color:#F2F2F2;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
img,button,input {vertical-align:middle;border:none;}
label{font-size:12px;color:#666;cursor:pointer;}
a,span{color:#666;font-size:12px;text-decoration:none;}
a:hover{text-decoration:underline;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul,li{list-style:none;list-style-type: none;}
h1,h2,h3,h4,h5,h6{font-size:100%;overflow:hidden;}
header {width:660px;margin:0 auto;font-size:28px;font-weight:bold;margin-top:20px;color:#ccc;text-shadow:1px 1px 1px #fff;font-family: 'revolt',georgia,'Microsoft yahei';}
.content {width:360px;margin:250px 700px auto;padding:30px 40px;border:2px solid #ccc;border-radius:10px;box-shadow:0 0 30px #ccc;background-color:white;}
.ipt {border:1px solid #ddd;padding:10px 5px;width: 240px;outline:none;border-radius:3px;background-color:#fff;font-family: 'revolt',georgia,'Microsoft yahei';}
.ipt:focus {background-color:#fefefe;box-shadow:0 0 3px #aaa;}
.thead {font-weight:bold;font-size:20px;padding-bottom:20px!important;text-shadow:1px 1px 1px #fff;}
.content th {color:#666;font-size:12px;font-weight:bold;text-shadow: 1px 1px 1px #fff;}
.content td {padding:5px 0;}
#submit_btn {background-color:#4797ED;border:none;border-radius:10px;box-shadow:0 0 3px #aaa;width:198px;height:41px;line-height:41px;color:#fff;font-size:18px;font-weight:bold;cursor:pointer;margin-right:20px;display:block;outline:none;text-shadow:0 1px 1px #777;float:left;}
#submit_btn:hover {background-color:#d8d8d8;color:#666;text-shadow:1px 1px 1px #fff;}
#forget:hover{text-decoration:none;}
.line {float:left;margin-top:10px;}
.pd15 {padding-top:15px!important;}
.red {color:red;}
.beijing{z-index:-2;width:1100px;height:600px;margin:auto auto;padding:30px 40px;border:2px solid #ccc;border-radius:10px;box-shadow:0 0 30px #ccc;background:url(images/beijing.jpg);}
</style>
</head>
<body>
<div class="beijing">
<div class="content">
<form method="post" id="login_form">
<table width="100%">
<thead>
<td colspan="2" class="thead">雏出宾馆客房管理系统</td>
</thead>
<tbody>
<tr>
<th><em class="red">*</em> 账号：</th>
<td><input type="text" value="" name="" id="input1" class="user ipt"></td>
</tr>
<tr>
<th><em class="red">*</em> 密码：</th>
<td><input type="password" value="" name="" id="input2" class="password ipt"></td>
</tr>
<tr>
<th class="pd15"></th>
<td class="pd15">
<button id="submit_btn" type="button">登录</button>
<p class="line"><a href="forget.php" id="forget" >忘记密码？</a></p>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>2、后边信息验证：access.php
<?php
session_start();
header("Content-type: text/html; charset=utf-8");
error_reporting(0);
if (!empty($_POST)) {
$conn=@mysql_connect("localhost","root" ,"guo941102");
mysql_select_db('kese',$conn);
mysql_query("set names utf8") or die(mysql_errno());
$data = $_POST;
$user=$_POST['username'];
$mima=$_POST['age'];
$sql="select adpass from admins where adid='$user'";
$result=mysql_query($sql);
$row=mysql_fetch_assoc($result);
if($row){
if($row['adpass']==$mima){
$_SESSION['user']=$user;
echo "1";//登录成功
}else{
echo "2";//密码错误
}
}else{
echo "3";//用户不存在
}
//print json_encode($user);
}
?>
var msgdsq;
//错误时：提示调用方法
function show_err_msg(msg){
$('.msg_bg').html('');
clearTimeout(msgdsq);
$('body').append('<div class="sub_err" style="position:absolute;top:60px;left:0;width:500px;z-index:999999;"></div>');
var errhtml='<div style="padding:8px 0px;border:1px solid #ff0000;width:100%;margin:0 auto;background-color:#fff;color:#B90802;border:3px #ff0000 solid;text-align:center;font-size:16px;font-family:微软雅黑;"><img style="margin-right:10px;" src="images/error.png">';
var errhtmlfoot='</div>';
$('.msg_bg').height($(document).height());
$('.sub_err').html(errhtml+msg+errhtmlfoot);
var left=($(document).width()-500)/2;
$('.sub_err').css({'left':left+'px'});
var scroll_height=$(document).scrollTop();
$('.sub_err').animate({'top': scroll_height+120},300);
msgdsq=setTimeout(function(){
$('.sub_err').animate({'top': scroll_height+80},300);
setTimeout(function(){
$('.msg_bg').remove();
$('.sub_err').remove();
},300);
}, "1000");
}
//正确时：提示调用方法
function show_msg(msg,url){
$('.msg_bg').html('');
clearTimeout(msgdsq);
$('body').append('<div class="sub_err" style="position:absolute;top:60px;left:0;width:500px;z-index:999999;"></div>');
var htmltop='<div style="padding:8px 0px;border:1px solid #090;width:100%;margin:0 auto;background-color:#FFF2F8;color:#090;border:3px #090 solid;;text-align:center;font-size:16px;"><img style="margin-right:10px;" src="images/success.png">';
var htmlfoot='</div>';
$('.msg_bg').height($(document).height());
var left=($(document).width()-500)/2;
$('.sub_err').css({'left':left+'px'});
$('.sub_err').html(htmltop+msg+htmlfoot);
var scroll_height=$(document).scrollTop();
$('.sub_err').animate({'top': scroll_height+120},500);
msgdsq=setTimeout(function(){
$('.sub_err').animate({'top': scroll_height+80},500);
setTimeout(function(){
$('.msg_bg').remove();
$('.sub_err').remove();
if(url!='')
{
location.href=url;
}
},800);
}, "1200");
}
//显示加载动画
function show_loading()
{
var str='<div class="msg_bg" style="background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:99998;width:100%;position:absolute;left:0;top:0"></div>';
str+='<div class="msg_bg" style="z-index:99999;width:100%;position:absolute;left:0;top:0;text-align:center;"><img src="images/loading.gif" alt="" class="loading"></div>'
$('body').append(str);
var scroll_height=$(document).scrollTop();
$('.msg_bg').height($(document).height());
$('.loading').css('margin-top',scroll_height+240);
}里边的加载动画，网上到处都是。。。。
借鉴，测试终于调试成功，留存下来备用。
另外发现了一个小的标签：<label> 标签中有个for ，一开始，还不知道，原来是为谁添加的标签，通过id名来传递
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
