前端技术博客

来源：互联网发布：python ide eclipse 编辑：程序博客网时间：2024/05/22 03:00

- 一、有关“记住我”功能

“记住我”功能有许多种方式，本部分介绍两种
1. cookie
引用jQuery.cookie.js可以用cookie在浏览器端记录。
2. localsession
在服务器端记录用户信息（这个不太确定），是HTML5的本地存储，使用localStorage对象将WEB数据持久化在本地。但这种存储方式会带来新的安全问题。先贴一段代码如下：

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>         <script>            $(function() {                if (localStorage.chkbx && localStorage.chkbx != '') {                    $('#remember_me').attr('checked', 'checked');                    $('#username').val(localStorage.usrname);                    $('#pass').val(localStorage.pass);                } else {                    $('#remember_me').removeAttr('checked');                    $('#username').val('');                    $('#pass').val('');                }                $('#remember_me').click(function() {                    if ($('#remember_me').is(':checked')) {                        // save username and password                        localStorage.usrname = $('#username').val();                        localStorage.pass = $('#pass').val();                        localStorage.chkbx = $('#remember_me').val();                    } else {                        localStorage.usrname = '';                        localStorage.pass = '';                        localStorage.chkbx = '';                    }                });            });        </script>        <div class="container">            <form class="form-signin">                <h2 class="form-signin-heading">Please sign in</h2>                <input type="text" class="input-block-level" placeholder="Email address" id='username'>                <input type="password" class="input-block-level" placeholder="Password" id="pass">                <label class="checkbox">                    <input type="checkbox" value="remember-me" id="remember_me"> Remember me                </label>                <button class="btn btn-large btn-primary" type="submit">Sign in</button>            </form>        </div>

测试可用，后期有更好更安全的解决方式，再陆续更新

二、页面跳转

直接贴代码：

function onclick(){    window.location.href = "http://www.baidu.com";}

三、搜索提示功能

纠结了半天，解决了下拉框的问题，除了样式太丑，其他都搞定了，但代码移植之后不成功，所以后半天还得继续纠结，先记录下来这个搜索提示的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>搜索</title><meta name="description" content=" 内容介绍不超过100个中文"><meta name="keywords" content=" 内容相关关键词3-5个"><link href="index.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="jquery.min.js"></script></head><body>    <div class="gover_search">        <div class="gover_search_form clearfix">            <span class="search_t">关键词匹配搜索</span>            <input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入关键词直接搜索" />            <button type="submit" class="search_btn">搜索</button>            <div class="search_suggest" id="gov_search_suggest">                <ul>                </ul>            </div>        </div>    </div><script type="text/javascript">//实现搜索输入框的输入提示js类function oSearchSuggest(searchFuc){    var input = $('#gover_search_key');    var suggestWrap = $('#gov_search_suggest');    var key = "";    var init = function(){        input.bind('keyup',sendKeyWord);        input.bind('blur',function(){setTimeout(hideSuggest,100);})    }    var hideSuggest = function(){        suggestWrap.hide();    }    //发送请求，根据关键字到后台查询    var sendKeyWord = function(event){        //键盘选择下拉项        if(suggestWrap.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40){            var current = suggestWrap.find('li.hover');            if(event.keyCode == 38){                if(current.length>0){                    var prevLi = current.removeClass('hover').prev();                    if(prevLi.length>0){                        prevLi.addClass('hover');                        input.val(prevLi.html());                    }                }else{                    var last = suggestWrap.find('li:last');                    last.addClass('hover');                    input.val(last.html());                }            }else if(event.keyCode == 40){                if(current.length>0){                    var nextLi = current.removeClass('hover').next();                    if(nextLi.length>0){                        nextLi.addClass('hover');                        input.val(nextLi.html());                    }                }else{                    var first = suggestWrap.find('li:first');                    first.addClass('hover');                    input.val(first.html());                }            }        //输入字符        }else{            var valText = $.trim(input.val());            if(valText ==''||valText==key){                return;            }            searchFuc(valText);            key = valText;        }    }    //请求返回后，执行数据展示    this.dataDisplay = function(data){        if(data.length<=0){            suggestWrap.hide();            return;        }        //往搜索框下拉建议显示栏中添加条目并显示        var li;        var tmpFrag = document.createDocumentFragment();        suggestWrap.find('ul').html('');        for(var i=0; i<data.length; i++){            li = document.createElement('LI');            li.innerHTML = data[i];            tmpFrag.appendChild(li);        }        suggestWrap.find('ul').append(tmpFrag);        suggestWrap.show();        //为下拉选项绑定鼠标事件        suggestWrap.find('li').hover(function(){                suggestWrap.find('li').removeClass('hover');                $(this).addClass('hover');            },function(){                $(this).removeClass('hover');        }).bind('click',function(){            input.val(this.innerHTML);            suggestWrap.hide();        });    }    init();};//实例化输入提示的JS,参数为进行查询操作时要调用的函数名var searchSuggest =  new oSearchSuggest(sendKeyWordToBack);//这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求//参数为一个字符串，是搜索输入框中当前的内容function sendKeyWordToBack(keyword){       /*  var obj = {                "keyword" : keyword             };             $.ajax({                       type: "POST",                       url: "${ctx}/front/suqiu2/search/prompt-keyword.action",                       async:false,                       data: obj,                       dataType: "json",                       success: function(data){                         //var json = eval("("+data+")");                         var key=data.split(",");                         var aData = [];                         for(var i=0;i<key.length;i++){                                //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回                            if(key[i]!=""){                                  aData.push(key[i]);                            }                         }                        //将返回的数据传递给实现搜索输入框的输入提示js类                         searchSuggest.dataDisplay(aData);                       }         });      */                //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回                var aData = [];                aData.push(keyword+'接口1');                aData.push(keyword+'接口2');                aData.push(keyword+'接口3');                aData.push(keyword+'接口4');                aData.push(keyword+'接口5');                aData.push(keyword+'接口3');                //将返回的数据传递给实现搜索输入框的输入提示js类                searchSuggest.dataDisplay(aData);}</script></body></html>

四、url中有变量的问题

url: "search/searchHint?data="+keyword +"",

其中keyword是变量，前后用“+”拼接字符串

五、echarts 添加标签“全选”

echarts功能不太完善，一直有很多bug，比如下面：
1.

var ecConfig = require('echarts/config');myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param){

这个LENGEND_SELECTED，移植到自己做的项目中居然不work，但在http://echarts.baidu.com:8897/echarts2/doc/example/legend.html 的demo中是可行的,这是其一；
2. 其二是直接在legend的data中加名称“测试”，如下：

legend: {                data: [            '降水量','最高气温', '最低气温','测试'        ]    },

但移植出来就不可用，除非series也加入“测试”相关的内容。

3.研究了很久之后，不，应该说查了很多资料之后，终于找到了一个可行的demo，直接把网站贴出来吧：http://gallery.echartsjs.com/editor.html?c=xSJ3fpfG6

option = {    title: {            text: '折线图堆叠'        },        tooltip: {            trigger: 'axis'        },        legend: {            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎','全选']        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        toolbox: {            feature: {                saveAsImage: {}            }        },        xAxis: {            type: 'category',            boundaryGap: false,            data: ['周一','周二','周三','周四','周五','周六','周日']        },        yAxis: {            type: 'value'        },        series: [            {                 name:'全选',                type:'line'            },            {                name:'邮件营销',                type:'line',                stack: '总量',                data:[120, 132, 101, 134, 90, 230, 210]            },            {                name:'联盟广告',                type:'line',                stack: '总量',                data:[220, 182, 191, 234, 290, 330, 310]            }        ]};//全选处理逻辑var selAll = '全选';var selFlag = false;myChart.on('legendselectchanged', function (params) {        //legend　全选操作        if(params.name == selAll){            selFlag = !selFlag;//全选，全不选切换            var dynamicSelected = {};            //设置全选            for(var index in params.selected){                dynamicSelected[index] = selFlag;            }            //重绘echarts            myChart.setOption({legend:{                selected:dynamicSelected            }});        }    });

亲测可用，感谢zjfromzero朋友，解决了一个大问题。

六、input取值

jQuery取input中的value值，直接用
("p").value是取不到的，用(“p”)[0].value可得

七、table设置固定宽度

table{    min-width: 100%;}td{    min-width: 100px;}.table-container{    overflow:auto;    display: block;}

八、ajax请求不携带session导致重定向

由login页面登录进去之后，以后的每次ajax请求都需要带上sessionid值，意思就是带上许可证，才能获得服务器端的数据。简单的ajax请求如下：

$.ajax({      type: 'GET',      url: this.path+'console/statusInfo',      success:function(data) {            console.log("请求用户信息：----"+JSON.stringify(data));            }      })

这种ajax请求没有设置cookie，不携带sessionid，会导致302重定向，循环login请求。但具体cookie和session什么关系，只知道cookie是浏览器端，session是服务器端生成的，具体的回头还得再研究研究。
总之，ajax请求里面加上一句如下，就可以了

$.ajax({      type: 'GET',      xhrFields: {            withCredentials: true      },      url: this.path+'console/statusInfo',      success:function(data) {              console.log("请求用户信息：----"+JSON.stringify(data));      }                   });

0 0