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

Posted 2021-04-08 让知识成为资产

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  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>`;
        $(".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();
});

更多内容，长按二维码关注

上文：