知问前端——cookie插件
Cookie是网站用来在客户端保存识别用户的一种小文件。一般可以保存用户登录信息、购物数据信息等一系列微小信息。
一、使用cookie插件
官方网站：http://plugins.jquery.com/cookie/
从官网下载cookie插件——jquery.cookie.js插件。
1.生成一个cookie，名称为user，内容为liayun：
$.cookie("user","liayun");
2.cookie的参数设置：
$.cookie("user","liayun", {
expires:7, //过期时间，7天后过期
path:"/", //根目录，path的作用就是设置路径，根目录到底所谓何???
});
$.cookie("aaa","bbb", {
//domain:"www.ycku.com" //设置域名，可以发现名为aaa的cookie并没有建立，为何???
secure:true //发送条件：仅限加密连接 默认为false，需要使用安全协议https
});
综上所述，除了expires这个参数有用，其他根本就没什么鸟用！！！
3.读取cookie数据：
alert($.cookie("user")); //liayun
alert($.cookie("aaa")); //undefined，名为aaa的cookie的参数secure为true，因为需要使用安全协议https，而我们一般使用http协议，所以返回undefined
$.cookie("ccc","李阿昀"); //自动编码为：%E6%9D%8E%E9%98%BF%E6%98%80
alert($.cookie("ccc")); //自动解码为：李阿昀
4.关闭编码/解码，默认为false：
$.cookie.raw = true; $.cookie("ddd","李阿昀"); //没有自动编码，李阿昀 alert($.cookie("ddd")); //李阿昀
5.读取所有cookie数据：
alert($.cookie());
注意：读取所有的cookie是以对象键值对存放的，所以也可以$.cookie().user获取cookie数据。
6.删除cookie：
$.removeCookie("user"); //删除的一般为当前目录
7.删除指定路径cookie：
$.removeCookie("user", {
path:"/" //删除根目录下的cookie
});
二、注册直接登录
把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>
javascript:void(0)的作用，就是用户点击链接之后，地址栏中地址后面没有一些###等奇怪的东东。
所以，index.html为：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <button id="search_button">查询</button> </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" action="123.html" title="会员注册"> <ol class="reg_error"></ol> <p> <label for="user">账号：</label> <input type="text" name="user" class="text" id="user"></input> <span class="star">*</span> </p> <p> <label for="pass">密码：</label> <input type="password" name="pass" class="text" id="pass"></input> <span class="star">*</span> </p> <p> <label for="email">邮箱：</label> <input type="text" name="email" class="text" id="email"></input> <span class="star">*</span> </p> <p> <label>性别：</label> <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input> <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input> </p> <p> <label for="date">生日：</label> <input type="text" name="birthday" readonly="readonly" class="text" id="date"></input> </p> </form> <div id="loading">数据交互中...</div> </body> </html>
jQuery改动后部分：
$("#member, #logout").hide();
if ($.cookie("user")) {
$("#member, #logout").show();
$("#reg_a, #login_a").hide();
$("#member").html($.cookie("user"));
} else {
$("#member, #logout").hide();
$("#reg_a, #login_a").show();
}
$("#logout").click(function() {
$.removeCookie("user");
window.location.href = "/jquery/"; //点击退出链接，跳到首页
});
success : function (responseText, statusText) {
if(responseText) {
$("#member, #logout").show();
$("#reg_a, #login_a").hide();
$("#member").html($.cookie("user"));
}
}
故，index.js为：
$(function() { $("#search_button").button({ icons:{ primary:"ui-icon-search", }, }); /* $.cookie("user","liayun"); $.cookie("user","liayun", { expires:7, //过期时间，7天后过期 path:"/", //根目录，path的作用就是设置路径，根目录到底所谓何??? }); */ /* $.cookie("aaa","bbb", { //domain:"www.ycku.com" //设置域名，可以发现名为aaa的cookie并没有建立，为何??? secure:true //发送条件：仅限加密连接 默认为false，需要使用安全协议https }); */ //alert($.cookie("user")); //liayun //alert($.cookie("aaa")); //undefined，名为aaa的cookie的参数secure为true，因为需要使用安全协议https，而我们一般使用http协议，所以返回undefined //$.cookie("ccc","李阿昀"); //自动编码为：%E6%9D%8E%E9%98%BF%E6%98%80 //alert($.cookie("ccc")); //自动解码为：李阿昀 //$.cookie.raw = true; //$.cookie("ddd","李阿昀"); //没有自动编码，李阿昀 //alert($.cookie("ddd")); //李阿昀 //alert($.cookie().ccc); //[object Object] //$.removeCookie("user"); //删除的一般为当前目录 //$.removeCookie("user", { // path:"/" //删除根目录下的cookie //}); $("#member, #logout").hide(); if ($.cookie("user")) { $("#member, #logout").show(); $("#reg_a, #login_a").hide(); $("#member").html($.cookie("user")); } else { $("#member, #logout").hide(); $("#reg_a, #login_a").show(); } $("#logout").click(function() { $.removeCookie("user"); window.location.href = "/jquery/"; //点击退出链接，跳到首页 }); $("#loading").dialog({ autoOpen:false, modal:true, closeOnEscape:false, resizable:false, draggable:false, width:180, //height:80 height:50 }).parent().find(".ui-widget-header").hide(); $("#reg_a").click(function() { $("#reg").dialog("open"); }); //$("#reg").dailog(...)返回的是jQuery对象，即对话框内容的div(id="reg")对象，所以可以连缀使用 $("#reg").dialog({ autoOpen:false, modal:true, resizable:false, width:320, height:340, buttons:{ '提交':function() { $(this).submit(); } } }).buttonset().validate({ submitHandler:function(form) { //alert("验证成功，准备提交中！"); $(form).ajaxSubmit({ url:"add.php", type:"post", beforeSubmit:function(formData,jqForm,options) { //提交之前，将“数据正在交互中...”对话框打开 //打开之后，高度又默认增加了30，所以在初始化dialog时，height应-30，变为50 $("#loading").dialog("open"); //alert($("#reg").dialog("widget").html()); //alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span> //alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span> $("#reg").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按钮 }, success:function(responseText,statusText) { //alert(responseText); //新增成功，返回1 if(responseText) { $("#reg").dialog("widget").find("button").eq(1).button("enable"); $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功..."); $.cookie("user", $("#user").val()); setTimeout(function() { $("#loading").dialog("close"); $("#reg").dialog("close"); $("#reg").resetForm(); //重置表单 $("#reg span.star").html("*").removeClass("succ"); $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中..."); $("#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("succ"); }, //恢复默认 unhighlight:function(element,errorClass) { $(element).css("border","1px solid #ccc"); //element即为<input>控件 //$(element).parent().find("span").html("ok"); $(element).parent().find("span").html(" ").addClass("succ"); }, errorLabelContainer:"ol.reg_error", wrapper:"li", rules:{ user:{ required:true, minlength:2 }, pass:{ required:true, minlength:6 }, email:{ required:true, email:true }, date:{ date:true } }, messages:{ user:{ required:"账号不得为空！", minlength:"账号不得小于{0}位！" }, pass:{ required:"密码不得为空！", minlength:"密码不得小于{0}位！" }, email:{ required:"邮箱不得为空！", email:"请输入正确的邮箱地址！" } } }); $("#date").datepicker({ changeMonth:true, changeYear:true, yearSuffix: ' ', maxDate:0, yearRange:"1950:2020", }); $("#email").autocomplete({ delay:0, autoFocus:true, source:function(request,response) { var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'], term = request.term, //获取用户输入的内容 name = term, //邮箱的用户名，如i_beautiful host = '', //邮箱的域名，如sina.com.cn ix = term.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), findedResult = $.map(findedHosts, function(value, index) { return name + "@" + value; }); result = result.concat(findedResult); } response(result); } }); });
