效果图：
第一部分 ： Cookie插件
学习要点：
1.使用 cookie 插件
2.注册直接登录
Cookie 是网站用来在客户端保存识别用户的一种小文件。一般来用库可以保存用户登录信息、购物数据信息等一系列微小信息。
一．使用 cookie 插件
官方网站：http://plugins.jquery.com/cookie/
//生成一个 cookie：
$.cookie('user', 'bnbbs');
//设置 cookie 参数
$.cookie('user', 'bnbbs', {
expires : 7, //过期时间，7 天后
path : '/', //设置路径，上一层
domain : 'www.ycku.com', //设置域名
secure : true, //默认为 false，需要使用安全协议 https
});
//关闭编码/解码，默认为 false
$.cookie.raw = true;
//读取 cookie 数据
alert($.cookie('user'));
//读取所有 cookie 数据
alert($.cookie());
注意：读取所有的 cookie 是以对象键值对存放的，所以，也可以$.cookie().user 获取。
//删除 cookie
$.removeCookie('user');
//删除指定路径 cookie
$.removeCookie('user', {
path : '/',
});二．注册直接登录
把 cookie 引入到知问前端中去。
//HTML 部分
<div class="header_member">
<a href="javascript:void(0)" id="reg_a">注册</a>
<a href="javascript:void(0)" id="member">用户</a>
|
<a href="javascript:void(0)" id="login_a">登录</a>
<a href="javascript:void(0)" id="logout">退出</a>
</div>
//jQuery 部分
$('#member, #logout').hide();
if ($.cookie('user')) {
$('#member, #logout').show();
$('#reg_a, #login_a').hide();
} else {
$('#member, #logout').hide();
$('#reg_a, #login_a').show();
}
$('#logout').click(function () {
$.removeCookie('user');
window.location.href = '/jquery/';
});
success : function (responseText, statusText) {
$('#reg_a, #login_a').hide();
$('#member, #logout').show();
$('#member').html($.cookie('user'));
},第二部分：
学习要点：
一．服务器端代码
二．jQuery 代码
一．服务器端代码
//is_user.php
<?php
require 'config.php';
$query = mysql_query("SELECT user FROM user WHERE user='{$_POST['user']}'")
or die('SQL 错误！');
if (mysql_fetch_array($query, MYSQL_ASSOC)) {
echo 'false';
} else {
echo 'true';
}
mysql_close();
?>
注意：在部分环境下，要设置 UTF8 无 BOM，否则验证无法提醒。
//login.php
<?php
require 'config.php';
$_pass = sha1($_POST['login_pass']);
$query = mysql_query("SELECT user,pass FROM user WHERE
user='{$_POST['login_user']}' AND pass='{$_pass}'") or die('SQL 错误！');
if (mysql_fetch_array($query, MYSQL_ASSOC)) {
echo 'true';
} else {
echo 'false';
}
mysql_close();
?>
//判断是否一周有效
if ($('#expires').is(':checked')) {
$.cookie('user', $('#login_user').val(), {
expires : 7,
});
} else {
$.cookie('user', $('#login_user').val());
}1、想导入jquery.cookie.js:
index.html:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"></link>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script type="text/javascript">
</script>
</head>
<body>
<div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" class="search" name="search"/>
</div>
<div class="header_button">
<input type="button" id="search_button" value="查询"/>
</div>
<div class="header_member">
<a href="javascript:void(0)" id="reg_a">注册</a>
<a href="javascript:void(0)" id="member">用户</a>
|
<a href="javascript:void(0)" id="login_a">登录</a>
<a href="javascript:void(0)" id="logout">退出</a>
</div>
</div>
</div>
<form id="reg" title="知问注册">
<ol class="reg_error"></ol>
<p>
<label for="user">账号：</label>
<input type="text" name="user" class="text"></input>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="text" name="pass" class="text" id="pass" />
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" />
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" checked="checked"><label
for="male">男</label></input><input type="radio" name="sex" id="female"><label
for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="date" readonly="readonly" class="text" id="date" />
</p>
</form>
<form id="login" title="会员登录">
<ol class="login_error"></ol>
<p>
<label for="user">帐号：</label>
<input type="text" name="login_user" class="text" id="login_user" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="login_pass" class="text" id="login_pass" />
<span class="star">*</span>
</p>
<p>
<input type="checkbox" name="expires" id="expires" checked="checked" /><label for="expires">登录后有效期一周</label>
</p>
</form>
<div id="loading">数据正在交互之中...</div>
</body>
</html>
body{
margin:0;
padding:0;
font-size:15px;
font-family:'宋体';
background:#fff;
}
#header{
width:100%;
height:40px;
background:url(../img/header_bg.png);
position:absolute;
top:0px;
}
#header .header_main{
width:800px;
height:40px;
margin:0 auto;
}
#header .header_main h1{
font-size:20px;
margin:0;
padding:0;
color:#666;
height:40px;
line-height:40px;
padding:0 10px;
float:left;
}
#header .header_search{
padding:6px 0;
float:left;
}
#header .header_search .search{
width:300px;
height:24px;
border:1px solid #ccc;
background:#fff;
color:#666;
font-size:14px;
text-indent:5px;
}
#header .header_button {
padding:0 5px;
float:left;
}
#header .header_member{
float:right;
height:40px;
line-height:40px;
color:#555;
font-size:14px;
}
#header .header_member a{
text-decoration:none;
color:#555;
font-size:14px;
}
#reg,#login{
padding:15px 0 0 15px;
}
#reg p ,#login p{
margin:10px 0;
padding:0;
}
#reg p label ,#login p label{
font-size:14px;
color:#666;
}
#reg .star,#login .star{
color:red;
}
#reg .success ,#login .success{
display:inline-block;
width:28px;
background:url(../img/reg_succ.png) no-repeat;
}
#reg ol,#login ol{
margin:0;
padding:0 0 0 20px;
color:maroon;
}
#reg ol li ,#login ol li{
height:20px;
}
#reg .text,#login .text{
border-radius:4px;
border:1px solid #ccc;
background":#fff;
height:25px;
width:200px;
text-indent:5px;
color:#666;
}
#loading{
background : url(../img/loading.gif) no-repeat 15px 10px;
line-height : 25px;
font-size:14px;
font-weight:bold;
text-indent:40px;
color:#666;
}
#expires {
position:relative;
top:2px;
margin:0 2px 0 125px;
}
.ui-tooltip {
color:red;
}
.ui-menu-item a.ui-state-focus {
background:url(../img/ui_header_bg.png);
}index.js:
$(function(){
$('#search_button').button({
icons : {
primary : 'ui-icon-search',
},
});
$('#member,#logout').hide();
if($.cookie('user')){
$('#menber,#logout').show();
$('#reg_a,#login_a').hide();
$('#menber').html($.cookie('user'));
}else{
$('#menber,#logout').hide();
$('#reg_a,#login_a').show();
}
$('#reg_a').click(function(){
$('#reg').dialog('open');
});
$('#logout').click(function(){
$.removeCookie('user');
window.location.href="/jquery/";
});
$('#loading').dialog({
modal : true,
autoOpen : false,
closeOnEscape : false, //按下 esc 无效
resizable : false,
draggable : false,
width : 210,
height: 50,
}).parent().find('.ui-widget-header').hide();//去掉 header 头
$('#reg').dialog({
autoOpen:false,
modal:true,
resizable:false,
width:320,
height:340,
buttons:{
'提交':function(){
$(this).submit();
}
}
}).buttonset().validate({
submitHandler : function(form){
$(form).ajaxSubmit({
url : 'add.php',
type : 'post',
beforeSubmit : function(form){
$('#loading').dialog('open');
$('#reg').dialog('widget').find('button').eq(1).button('disable');
},
success : function(responseText,statusText){
$('#reg').dialog('widget').find('button').eq(1).button('enable');
if(responseText){
$('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...');
$.cookie('user',$('#user').val());
setTimeout(function(){
$('#loading').dialog('close');
$('#loading').css('background','url(img/loading.gif) no-repeat 15px 10px').html('数据正在交互之中...');
$('#reg').dialog('close');
$('#reg').resetForm();
$('#reg span.star').html('*').removeClass('success');
$('#member, #logout').show();
$('#reg_a, #login_a').hide();
$('#member').html($.cookie('user'));
},1000)
}
}
});
},
showErrors : function(errorMap,errorList){
var errors = this.numberOfInvalids();
if(errors > 0){
$('#reg').dialog('option','height',errors * 20 + 340);
}else {
$('#reg').dialog('option','height',340);
}
this.defaultShowErrors();
},
highlight : function(element,errorClass){
$(element).css('border','1px solid #630');
$(element).parent().find('span').html('*').removeClass('success');
},
unhighlight : function(element,errorClass){
$(element).css('border','1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('success');
},
errorLabelContainer : 'ol.reg_error',
wrapper : 'li',
rules : {
user : {
required : true,
minlength : 2,
},
pass : {
required : true,
rangelength : [6,12],
},
email : {
required :true,
email : true,
}
},
messages : {
user : {
required : '帐号不得为空！',
minlength : jQuery.format('帐号不得小于{0}位！'),
},
pass : {
required : '密码不能为空！',
rangelength : $.format('密码的长度在{0}-{1}位之间'),
},
email : {
required : '邮箱不能为空!',
email : '请输入正确的邮箱格式!',
}
}
});
$('#reg input[title]').tooltip({
position : {
my : 'left center',
at : 'right+5 center'/*right加上5个像素*/
},
});
$('#date').datepicker({
dateFormat : 'yy-mm-dd',
dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
showButtonPanel : true,
closeText : '关闭',
currentText : '今天',
nextText : '下个月',
prevText : '上个月',
changeMonth : true,
changeYear :true,
yearRange : '1950:2050',
});
var srcArray=['aaa@163.com', 'bbb@163.com', 'ccc@163.com'];
$('#email').autocomplete({
delay:0,
autoFocus : true,
source:function(request,response){
var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'],
term=request.term,//获取输入的内容
name=term,
host='', //域名
ix=name.indexOf('@'),//获取@的位置
result=[]; //结果
//结果第一条是自己输入
result.push(term);
if(ix>-1){
name=term.slice(0,ix);
host=term.slice(ix+1);
}
if(name){
//得到找到的域名
var findedHosts=(host ? $.grep(hosts,function(value,index){
return value.indexOf(host) > -1
}):hosts),
findedResults=$.map(findedHosts,function(value,index){
return name+"@"+value;
});
result=result.concat(findedResults);
}
response(result);
},
});
$('#login_a').click(function(){
$('#login').dialog('open');
});
$('#login').dialog({
autoOpen:false,
modal:true,
resizable:false,
width:320,
height:260,
buttons:{
'登陆':function(){
$(this).submit();
}
}
}).validate({
submitHandler : function(form){
$(form).ajaxSubmit({
url : 'login.php',
type : 'post',
beforeSubmit : function(form){
$('#loading').dialog('open');
$('#login').dialog('widget').find('button').eq(1).button('disable');
},
success : function(responseText,statusText){
$('#login').dialog('widget').find('button').eq(1).button('enable');
if(responseText){
$('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('登陆成功...');
if ($('#expires').is(':checked')) {
$.cookie('user', $('#login_user').val(), {
expires : 7,
});
} else {
$.cookie('user', $('#login_user').val());
}
setTimeout(function(){
$('#loading').dialog('close');
$('#loading').css('background','url(img/loading.gif) no-repeat 15px 10px').html('正在登陆之中...');
$('#login').dialog('close');
$('#login').resetForm();
$('#login span.star').html('*').removeClass('success');
$('#member, #logout').show();
$('#reg_a, #login_a').hide();
$('#member').html($.cookie('user'));
},1000)
}
}
});
},
showErrors : function(errorMap,errorList){
var errors = this.numberOfInvalids();
if(errors > 0){
$('#login').dialog('option','height',errors * 20 + 260);
}else {
$('#login').dialog('option','height',260);
}
this.defaultShowErrors();
},
highlight : function(element,errorClass){
$(element).css('border','1px solid #630');
$(element).parent().find('span').html('*').removeClass('success');
},
unhighlight : function(element,errorClass){
$(element).css('border','1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('success');
},
errorLabelContainer : 'ol.login_error',
wrapper : 'li',
rules : {
login_user : {
required : true,
minlength : 2,
},
login_pass : {
required : true,
rangelength : [6,12],
remote : {
url : 'login.php',
type : 'post',
data : {
login_user : function(){
return $('#login_user').val();
},
},
},
},
},
messages : {
login_user : {
required : '帐号不得为空！',
minlength : jQuery.format('帐号不得小于{0}位！'),
},
login_pass : {
required : '密码不能为空！',
rangelength : $.format('密码的长度在{0}-{1}位之间'),
remote : '帐号或密码不正确！',
}
}
});
});
4942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
