前端技术

最新推荐文章于 2023-04-08 08:01:28 发布

Juliabyr

最新推荐文章于 2023-04-08 08:01:28 发布

阅读量1.7k

点赞数

分类专栏：前端学习文章标签： cookie html5

本文链接：https://blog.csdn.net/zhuye1992/article/details/71158701

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

“记住我”功能有许多种方式，本部分介绍两种

cookie
引用jQuery.cookie.js可以用cookie在浏览器端记录。
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 ") . v a l u e 是取不到的，用$ (“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));
      }
                   });

Juliabyr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端技术

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

扫一扫