关键词搜索/分页功能的前端代码(ajax + jQuery)

1.功能介绍

**使用语言：**ajax + jQuery
实现功能：

• 在页面加载时获得用户关键词搜索的查询字符串，向服务器发请求，拿回数据(商品信息及页码相关信息)，加载到页面上；

• 分页功能，点击上一页/数字页码/下一页，在页面上显示相应的页面内容。

2.代码实现

//页面一加载就要向服务器发起请求
$(function(){
    //封装函数，每点一次页码，都重新加载一遍商品列表，页码默认值是1
    function loadPage(pno=1){  

//在页面加载时获得search查询字符串，向服务器发请求，拿回数据
if(location.search!=="")   
//如果有关键词搜索，比如 ?kw=iphone 64g black
            var kw=location.search.slice(1); 
    //去掉?,获得查询字符串kw=iphone 64g black

$.ajax({
            type:"get",
            url:"data/products/getProductsByKw.php",
            data:"pno="+pno+(kw?"&"+kw:""),
            dataType:"json", 
            success:function(data){
                //console.log(data);  
//返回的json数据(php传回的$output包括count,data,pcount,pno,psize)
                var html="";

                for(var item of data.data){
                    html+=`<article class="thing">
                    <header class="cover">
                    <a href="">
                    <img src="${item.pic}" alt="${item.title}">
                    </a>
                    </header>
                    <section class="content">
                    <h4 class="title">
                    <a href="">${item.title}</a>
                    </h4>
                    </section>
                    <footer class="info">
                    <span class="reduce">-</span>
                    <input type="text" value="1">
                    <span class="add">+</span>
                    <a href="javascript:;" class="addCart" data-lid="">加入购物车</a>
                    </footer>
                    </article>`;
                };
                //页面动态加载数据
                $(".things-list").html(html);


                //分页功能

                //加载上一页/页码/下一页内容及样式
                var html=`<a href="javascript:;" class="previous">上一页</a>`;
                for(var i=1;i<=data.pcount;i++){
                    html+=`<a href="javascript:;" class=${i==data.pno?"current":""}>${i}</a>`;
                    //动态加载当前页页码，如果是当前页，样式显示高亮
                };
                html+=`<a href="javascript:;" class="next">下一页</a>`;
                //console.log(html);
                $(".pagination").html(html);

                //上一页，下一页按钮的禁用切换
                if(data.pno==1)
                //如果是第一页
                    $(".pagination").children(":first").addClass("disabled");
                    //禁用上一页的按钮
                if(data.pno==data.pcount){
                //如果是最后一页
                    $(".pagination").children(":last").addClass("disabled");
                    //禁用下一页的按钮
                };
            },
            error:function(xhr,err){
                alert("网络故障请检查！");
            }
        });
    };

    //点击按钮显示相应页面，给父元素绑定单击事件，利用冒泡原理
    //不需要重复请求数据，单独封装函数

    $(".pagination").on("click","a:not(.disabled):not(.current)",function() {
    //当前页面和禁用页面不能点，其它页面都可以点

        //this->a
        //alert(this.innerHTML);
        var $a=$(this);

        //上一页单击事件的思路：找到当前页码(取内容)，页码-1，再加载页面内容
        if($a.is(".previous"))
            loadPage(parseInt($(".pagination>a.current").html())-1);
        //查找下一页的按钮
        else if ($a.is(".next"))
            loadPage(parseInt($(".pagination>a.current").html())+1);
            //pno为字符串类型，用parseInt()将字符串转成数字，否则"1"+1后为"11"
        else
        //其它情况为数字页码，调用loadPage，传递页码，加载页面内容
            loadPage($a.html());
    });

    //调用loadPage()函数
    loadPage();
});