js登录特效+ajax提交表单+异步刷新验证

今天成功测试一种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>

<?phpsession_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);
}
?>

tooltips.js这里是提示时调用的显示

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="data: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="data: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="data: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名来传递

js登录特效+ajax提交表单+异步刷新验证相关推荐

VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素)
在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码: <%using (Html.BeginForm()) { %> ...
php ajax弹出框传值,PHP_Yii2.0 模态弹出框+ajax提交表单，如题我们使用模态弹出框+ajax - phpStudy...
Yii2.0 模态弹出框+ajax提交表单如题我们使用模态弹出框+ajax提交表单首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: ...
html ajax提交表单实例,Ajax提交表单并接收json实例代码
需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 xingming: nianling: ajax提交 js代码 function my ...
html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: /p> "http://www.w3.org/TR/x ...
js 用submit()方法提交表单，页面闪退问题以及解决方法
1.今天遇到一种情况,js使用submit方法提交表单,怎么都提交不过去,加断点倒跳过去了,主要实现的是这样的一个功能,点击一个按钮触发一个方法,在方法底下再提交表单过去,主要代码如下: <bu ...
Validator验证Ajax提交表单的方法
当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form在同一个页面的情况,但是提交一个表单以后不想页面刷新或者跳转,那么我们考虑到的就是Ajax提交表单,那么如何让Jquery的validato ...
ajax提交表单，包括跳入的坑！
本来今天上午写了一个js执行上下文的一个了解.但是写一大半的时候出去有事,电脑关了啥都没了. 还是让我们进入正题 ajax提交表单,很简单,原生js的代码太复杂,我们就jq的去写. 创建html文件, ...
ajax回调函数提交表单,MVC3中ajax提交表单无法执行success回调函数，怎么办?
js代码 function AjaxInitForm(formId, btnId, isDialog, urlId){ var formObj = $('#' + formId); var btnOb ...
AJAX 提交表单以及文件上传
本文转自:https://www.cnblogs.com/zhuxiaojie/p/4783939.html#autoid-0-0-0 作者:朱小杰前言使用ajax请求数据,很多人都会,比如说: ...

js登录特效+ajax提交表单+异步刷新验证

js登录特效+ajax提交表单+异步刷新验证相关推荐

最新文章

热门文章