整理使用ajax开发搜索功能中遇到的问题以及解决的方法

 jQuery/js   高蒙   阅读(1486)   评论(1)   2017-02-23 18:17:29    ajax 搜索功能 


本文旨在记录开发搜索功能模块中,遇到的问题和解决方法以及思考。由于本模块是基于ajax方式加载,所以大部分都是javascript代码。

开始的想法是,用ajax方法编写,第一用户体验好,第二顺便熟悉加强一下javascript。

不知者无畏,在接下来的开发中,就遇到了一些列的问题。下面进行整理,分析,便于以后查阅,吸取经验。


1、如何记录当前页?当前页刷新如何保持在当前页?

用过ajax分页的小伙伴们,都知道,使用ajax进行分页的时候,地址栏的链接是不会变化的。这就牵涉到一个问题,当我们刷新当前页的时候,如何保持呢。

打个比方,如果在当前的搜索添加下面,我已经选择了很多的条件,难道刷新又回到初始的查询条件吗?这样明显是不合理的。


2、如何实现后退事件,返回上一页?

同第一个问题所在,ajax请求,地址栏不改变,所以点击浏览器后退按钮的时候,就不存在返回上下页的问题。

那么,可以使用html5 history属性去解决。

其实使用到pushStatestate

1、history.pushState()将链接写入到地址栏。

2、history.state读取浏览地址。

但是,这个方法有个局限,就是浏览器内核支持IE9+。


3、全部搜索展示条件的部分,分别用封装单独的函数进行操作?

在第一次编辑中,我犯了一个错误,就是想写一个大的函数,将很多的操作都编写在里面。现实证明,我的写法是不合理的。

打个比方,之前我是用javascript手动的去触发demo节点上的函数,将其点击状态显示在全部搜索的位置。这样就会出现一个问题。有几个条件,就会触发几次点击事件,

触发点击事件时,程序相当于在此的请求,在同意条件的情况下,会多出很多请求,明显不合理,会增加服务器额外的输出。


4、优化地址链接,使其简洁干练?

在使用history属性时候,需要优化链接地址。这个部分,不在这里赘述了。


在下图片中标记①-⑦位置的地方都是需要注意的地方。说了这么多,删减无关紧要的,我们看看具体的实现代码:

模型搜索11.jpg

html代码:

<li  onclick="showModel(this,'316',1,'现代简约');"><a href="javascript:;">现代简约</a></li>
<li  onclick="showModel(this,'317',1,'简欧');"><a href="javascript:;">简欧</a></li>
<li  onclick="showModel(this,'318',1,'中式');"><a href="javascript:;">中式</a></li>
<li  onclick="showModel(this,'319',1,'新中式');"><a href="javascript:;">新中式</a></li>

javascript代码:

这里主要使用几个函数,可以自行的扩展。

  • 1、$(function({})); 自动加载。

  • 2、showModel();     主函数,处理点击操作。

  • 3、getCate();       点击大类,获取小分类的操作。

  • 4、model_soso_append_html();ajax加载数据。

  • 5、model_demo_html();提取页面循环结构。

  • 6、getcomment();点击分页处理函数。

  • 7、showStyle(); 展示风格

  • 8、showBCate(); 展示大类

  • 9、showScate(); 展示小类

var keyword='',style=0,order=0,isyear=0,recommend=0,bid=301,sid=330,page=1,pagesize= 0,onloads=false;
    // 默认加载数据
    $(function(){
        showStyle(style);
        showBCate(bid);
        showScate(bid,sid);
        var index = layer.load();
        model_soso_append_html(keyword,style,order,isyear,recommend,bid,sid,page);
    });
    // 搜索结果展示分类名称
    function showStyle(id){
        if(id == 0){
            $('#so_style').parent('a').hide();
            $('#so_style').html(txt);
            $('#gm_style').children('li').removeClass('active').first().addClass('active');
        }else{
            var txt = $('#gm_style').find('.active').attr('txt');
            $('#so_style').parent('a').show();
            $('#so_style').html(txt);
        }
    }
    // 搜索结果展开大类名称
    function showBCate(id){
        if(id == 0){
            $('#category_list').html('');
            $('#so_sid').hide();
            $('#so_bid').parent('a').hide();
            $('#gm_bid').children('li').removeClass('active').first().addClass('active');
            sid = 0;
        }else{
            var txt =$('#gm_bid').find('.active').attr('txt');
            $('#so_bid').parent('a').show();
            $('#so_bid').html(txt);
        }
    }
    // 搜索结果展开小类
    function showScate(bid,sid){
        if(sid == 0){
            $('#so_sid').hide();
        }
        if(bid == 0){
            $('#so_sid').hide();
            $('#gm_sid_list').children('li').removeClass('active').first().addClass('active');
        }else{
            getCate(bid,sid);
        }
    }
    /* 模型小类 */
    function showModel(obj,cateid,type,txt){
        // 初始话分页
        page =1;
        var index = layer.load();
        if(!cateid && !type){
            layer.msg('参数异常');return false;
        }
        $(obj).addClass('active').siblings("li").removeClass('active');
        switch(type){
            // 风格
            case 1:
                showStyle(cateid);
                style=cateid;
                break;
            // 大类
            case 2:
                bid=cateid;
                showBCate(cateid);
                sid = 0;
                showScate(cateid,sid);
                break;
            // 小类
            case 3:
                $('#so_sid').show().find('.red').html(txt);
                sid=cateid;
                break;
            // 关闭按钮
            case 4:
                if(cateid == 'gm_sid'){
                    sid=0;
                    showScate(bid,sid)
                }
                if(cateid == 'gm_bid'){
                    bid=0;
                    sid=0;
                    showBCate(bid);
                    showScate(bid,sid);
                }
                if(cateid == 'gm_style'){
                    style=0;
                    showStyle(style);
                }
                // 删除关键字
                if(cateid == 'so_key'){hhh
                    keyword = '';
                    $('#so_key').hide();
                    $('#searchbox-keywords').val('');
                }
                break;
            // 排序
            case 5:
                order = cateid;
                break;
            // 年会员 推荐模型
            case 6:
                // 获取复选框数据
                if(cateid == 1){
                    isyear = $(obj).prop('checked')?1:0;
                }
                if(cateid == 2){
                    recommend = $(obj).prop('checked')?1:0;
                }
                break;
        }
	/* 写入链接到地址栏 */
        pushurl(page);
	/* 执行ajax请求数据 */
        model_soso_append_html(keyword,style,order,isyear,recommend,bid,sid,page);
    }
    /* 分类展示 */
    function getCate(id,sid){
        $.ajax({}).done(function(data){}).fail(function(){});
    }
    /* ajax 加载数据  */
    function model_soso_append_html(keyword,style,order,isyear,recommend,bid,sid,page){
        $.ajax({}).done(function(data){}).fail(function(){});
    }
    /* 循环html结构体 */
    function model_demo_html(data){
        $.each(data,function(index,item){});
        return html;
    }

    /* 加载分页 */
    function getcomment(page){
        pushurl(page);
        model_soso_append_html(keyword,style,order,isyear,recommend,bid,sid,page);
    }

    /* 点击左右箭头切换 */
    $('.fp-prev').on('click',function(event){
        event.stopPropagation();
        $('#commrnt_page').prev().click();
    });
    $('.fp-next').on('click',function(event){
        event.stopPropagation();
        $('#commrnt_page').next().click();
    });

    /* history 将链接写入到地址栏中 */ 
    function pushurl(page){
        if (history.pushState != undefined) {
            var pushurls = "/model/search-",ext='.html';
            if(keyword.length >0){
                ext = ".html?keyword=" + keyword;
            }
            pushurls += style + "-" + order + "-" + isyear + "-" + recommend + "-" + bid + "-"+sid+"-"+page+ext;
            history.pushState(pushurls, '', pushurls);
        }
    }

    /* 后退事件 */ 
     window.onpopstate=function(){
         var state = history.state;
         if(state){
             location.href=state;
         }else{
             location.reload();
         }
     }

以上就是我在开发搜索功能模块中遇到的问题,以及解决的方法。




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客