jquery+Ajax 간단 한 페이지 효과 구현

본 논문 의 사례 는 jquery+Ajax 가 페이지 별 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.jsp 페이지 라면 EL 표현 식 과 JSTL 태그 로 페이지 바 를 만 들 수 있 습 니 다.어렵 지 않 습 니 다.EL 표현 식 과 JSTL 태그 로 이 루어 진 단점 은 비동기 효 과 를 실현 하지 못 하고 전체 페이지 를 다시 갱신 한 것 이다.
2.일반적인 html 페이지 라면 EL 표현 식 과 JSTL 라벨 을 사용 할 수 없습니다.이 때 는 비동기 Ajax 방식 으로 만 이 루어 질 수 있 습 니 다.물론 JSP 페이지 는 두 가지 방식 으로 사용 할 수 있 습 니 다.
3.페이지 바,여 기 는 Ajax 와 Jquery 로 만 들 었 습 니 다.실현 하기 가 비교적 번 거 롭 고 코드 가 매우 길다.왜냐하면 모두 한 무더기 의 문자열 을 연결 한 다음 에 html()방법 이나 append()방법 으로 문서 의 내용 을 바 꾸 기 때문이다.
사전 분석
브 라 우 저 측 에서 서버 측 에 보 내야 할 인 자 는 두 가지 가 있 습 니 다.
① 현재 페이지 currentPage;
② 페이지 크기(한 페이지 에 몇 개의 기록 을 표시)pageSize.
서버 측 이 브 라 우 저 측 에 보 낸 것 은 JSon 형식의 데이터,즉 페이지 실체 클래스 PageBean 입 니 다.그 중에서 PageBean 은 다음 과 같은 필드 가 있 습 니 다.
① 총 기록 수 totalCount;
② 총 페이지 totalPage;
③ 각 페이지 의 데이터 List list;
④ 현재 페이지 현재 페이지;
⑤ 각 페이지 에 표 시 된 기록 수 pageSize.
이 PageBean 은 범 형 을 지원 합 니 다.코드 는 다음 과 같 습 니 다.

public class PageBean<T> 
{
    private int totalCount; //     
    private int totalPage ; //    
    private List<T> list ; //      
    private int currentPage ; //    
    private int rows;//        ，   pageSize

    public int getTotalCount() 
    {
        return totalCount;
    }

    public void setTotalCount(int totalCount)
    {
        this.totalCount = totalCount;
    }

    public int getTotalPage() 
    {
        return totalPage;
    }

    public void setTotalPage(int totalPage) 
    {
        this.totalPage = totalPage;
    }

    public List<T> getList() 
    {
        return list;
    }

    public void setList(List<T> list) 
    {
        this.list = list;
    }

    public int getCurrentPage() 
    {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) 
    {
        this.currentPage = currentPage;
    }

    public int getRows() 
    {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    @Override
    public String toString() 
    {
        return "PageBean{" +
                "totalCount=" + totalCount +
                ", totalPage=" + totalPage +
                ", list=" + list +
                ", currentPage=" + currentPage +
                ", rows=" + rows +
                '}';
    }
}

페이지 를 나 누 려 면 SQL 문장의'limit'을 사용 해 야 합 니 다.예 를 들 어 의 미 를 설명 하 다.

select * from student limit 2,5;

구체 적 인 의미:student 표 에서 데 이 터 를 조회 하고 색인 이'2'인 기록 부터 조회 한 다음 에 5 가 지 를 찾 습 니 다.
색인 은 0 에서 시작 되 기 때문에 위의 문 구 는 3,4,5,6,7 조 기록 을 조회 한 것 과 같 고 모두 5 조 기록 이다.
한 마디 로 하면 첫 번 째 숫자 는'어디서부터 찾 아 볼 까'라 는 뜻 이 고,두 번 째 숫자 는'몇 개 뒤로 찾 아 보 자'는 뜻 이다.
이곳 의"어디서부터 조사 할 것 인가"는 계산 이 필요 하 다.공식 은 다음 과 같다.
(currentPage-1)×pageSize
즉,현재 페이지 번호 에서 1,괄호 를 빼 고 페이지 크기 를 곱 하 는 것 이다.
그래서 검색 어의 위조 코드 는 다음 과 같다.

select * from student limit (currentPage-1)×pageSize,pageSize;

총 페이지 번호 totalPage 에 대해 서 는 총 기록 수 totalCount 와 페이지 크기 pageSize 를 통 해 계산 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다:

totalPage=totalCount%pageSize==0?totalCount/pageSize:(totalCount/pageSize+1);

5.서버 측 주요 코드

import com.fasterxml.jackson.databind.ObjectMapper;
import domain.PageBean;
import domain.RainFall;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import util.JDBCUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/ViewRainByPageServlet")
public class ViewRainByPageServlet extends HttpServlet
{
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        JdbcTemplate template=new JdbcTemplate(JDBCUtils.getDataSource());
        String sql="select * from rain_fall limit ?,?";//      
        String sql2="select * from rain_fall";//      
        List<RainFall> countList = template.query(sql2, new BeanPropertyRowMapper<RainFall>(RainFall.class));
        int totalCount=countList.size();//          
        int totalPage;//         ，                      

        String currentPage = request.getParameter("currentPage");
        String pageSize = request.getParameter("pageSize");
        int intCurrentPage = Integer.parseInt(currentPage);//         
        if(intCurrentPage==0)//         ，currentPage  1，     0   
        {
            intCurrentPage=1;//     currentPage=0，       1，             
        }

        int intPageSize = Integer.parseInt(pageSize);//         
        totalPage=totalCount%intPageSize==0?totalCount/intPageSize:(totalCount/intPageSize+1);//       
        if(intCurrentPage>totalPage)//         ，currentPage  1，           
        {
            intCurrentPage=totalPage;//          
        }

        int startIndex=(intCurrentPage-1)*intPageSize;//            ？

        List<RainFall> list = template.query(sql, new BeanPropertyRowMapper<RainFall>(RainFall.class),startIndex,intPageSize);
        ObjectMapper mapper=new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");//             
        PageBean<RainFall> pageBean=new PageBean<>();//  PageBean  
        //  PageBean  
        pageBean.setTotalCount(totalCount);
        pageBean.setTotalPage(totalPage);
        pageBean.setList(list);
        pageBean.setCurrentPage(intCurrentPage);
        pageBean.setRows(intPageSize);
        //        
        System.out.println(pageBean);
        mapper.writeValue(response.getOutputStream(),pageBean);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {

        this.doPost(request, response);

    }
}

6.전단 코드(긴)

<%--
  Created by Yingyong Lao.
  User: laoyingyong
  Date: 2019-12-10
  Time: 19:28
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>      </title>
    <!-- 1.   CSS      -->
    <link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery  ，    1.9      -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3.   bootstrap js   -->
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () //    
        {
            $.post("ViewRainByPageServlet",{currentPage:1,pageSize:5},function (data)//          ajax  ，   5   ,        
            {
               var totalCount=data.totalCount;//    
               var totalPage=data.totalPage;//   
               var currentPage=data.currentPage;//    

                if(currentPage==1)//       1，          ，  class="disabled" ，     “  ”  
                {
                    var str=' <li class="disabled" οnclick="findByPage('+(currentPage-1)+',5)">
' +
                        '                    <a href="#" aria-label="Previous">
' +
                        '                        <span aria-hidden="true">&laquo;</span>
' +
                        '                    </a>
' +
                        '                </li>';

                }
                else//               
                {
                    var str=' <li οnclick="findByPage('+(currentPage-1)+',5)">
' +
                        '                    <a href="#" aria-label="Previous">
' +
                        '                        <span aria-hidden="true">&laquo;</span>
' +
                        '                    </a>
' +
                        '                </li>';

                }

                for(var i=1;i<=totalPage;i++)//    ，      （       ）     
                {
                    if(i==currentPage)//               currentPage，   class="active"，        
                    {
                        var item='<li οnclick="findByPage('+i+',5);" class="active"><a href="#">'+i+'</a></li>';
                    }
                    else
                    {
                        var item='<li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
                    }
                    str=str+item;

                }
                if(currentPage==totalPage)//           ，          ，  class="disabled" ，     “  ”  
                {
                    var strend='<li class="disabled" οnclick="findByPage('+(currentPage+1)+',5)">
' +
                        '                    <a href="#" aria-label="Next">
' +
                        '                        <span aria-hidden="true">&raquo;</span>
' +
                        '                    </a>
' +
                        '                </li>
' +
                        '                <span style="font-size: 24px" id="total_sp"> '+totalCount+'   ， '+totalPage+' </span>';

                }
                else //      ，       
                {
                    var strend='<li οnclick="findByPage('+(currentPage+1)+',5)">
' +
                        '                    <a href="#" aria-label="Next">
' +
                        '                        <span aria-hidden="true">&raquo;</span>
' +
                        '                    </a>
' +
                        '                </li>
' +
                        '                <span style="font-size: 24px" id="total_sp"> '+totalCount+'   ， '+totalPage+' </span>';

                }

                str=str+strend;
                $("#fenyelan").html(str);//      

                var array=data.list;
                for(var i=0;i<array.length;i++)
                {
                    var obj=array[i];
                    var id=obj.id;
                    var area=obj.area;
                    var precipitation=obj.precipitation;
                    var month=obj.month;
                    var releaseDate=obj.releaseDate;
                    //      
                    $("#rain_table").append('<tr class="info">
' +
                        '                <td style="text-align: center">'+id+'</td>
' +
                        '                <td style="text-align: center">'+area+'</td>
' +
                        '                <td style="text-align: center">'+precipitation+'</td>
' +
                        '                <td style="text-align: center">'+month+'</td>
' +
                        '                <td style="text-align: center">'+releaseDate+'</td>
' +
                        '            </tr>');
                }

            });//          ajax  end

        });//    end



        //           ，           ，            ，         
        function findByPage(curPage,paSize) //      ，        ：          （       ）
        {
            $.post("ViewRainByPageServlet",{currentPage:curPage,pageSize:paSize},function (data) //  ajax  
            {
                var totalCount=data.totalCount;//    
                var totalPage=data.totalPage;//   
                var currentPage=data.currentPage;//    


                if(currentPage==1)//       1，          ，  class="disabled" ，     “  ”  
                {
                    var str=' <li class="disabled" οnclick="findByPage('+(currentPage-1)+',5)">
' +
                        '                    <a href="#" aria-label="Previous">
' +
                        '                        <span aria-hidden="true">&laquo;</span>
' +
                        '                    </a>
' +
                        '                </li>';

                }
                else//     ，            
                {
                    var str=' <li οnclick="findByPage('+(currentPage-1)+',5)">
' +
                        '                    <a href="#" aria-label="Previous">
' +
                        '                        <span aria-hidden="true">&laquo;</span>
' +
                        '                    </a>
' +
                        '                </li>';

                }


                //         
                for(var i=1;i<=totalPage;i++)
                {
                    if(i==currentPage)//               currentPage，   class="active"，        
                    {

                        var item='<li οnclick="findByPage('+i+',5);" class="active"><a href="#">'+i+'</a></li>';
                    }
                    else
                    {
                        var item='<li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
                    }


                    str=str+item;

                }
                if(currentPage==totalPage)//           ，          ，  class="disabled" ，     “  ”  
                {
                    var strend='<li class="disabled" οnclick="findByPage('+(currentPage+1)+',5)">
' +
                        '                    <a href="#" aria-label="Next">
' +
                        '                        <span aria-hidden="true">&raquo;</span>
' +
                        '                    </a>
' +
                        '                </li>
' +
                        '                <span style="font-size: 24px" id="total_sp"> '+totalCount+'   ， '+totalPage+' </span>';

                }
                else //      ，       
                {
                    var strend='<li οnclick="findByPage('+(currentPage+1)+',5)">
' +
                        '                    <a href="#" aria-label="Next">
' +
                        '                        <span aria-hidden="true">&raquo;</span>
' +
                        '                    </a>
' +
                        '                </li>
' +
                        '                <span style="font-size: 24px" id="total_sp"> '+totalCount+'   ， '+totalPage+' </span>';

                }
                str=str+strend;
                $("#fenyelan").html(str);//        

                //      
                var tableStr='<caption style="text-align: center;font-size: 24px">      </caption>
' +
                    '            <tr class="success">
' +
                    '                <th style="text-align: center">id</th>
' +
                    '                <th style="text-align: center">  </th>
' +
                    '                <th style="text-align: center">   （mm）</th>
' +
                    '                <th style="text-align: center">  </th>
' +
                    '                <th style="text-align: center">    </th>
' +
                    '            </tr>';
                var array=data.list;//         
                for(var i=0;i<array.length;i++)//      
                {
                    var obj=array[i];//             
                    var id=obj.id;
                    var area=obj.area;
                    var precipitation=obj.precipitation;
                    var month=obj.month;
                    var releaseDate=obj.releaseDate;
                    //        
                    var oneRecord='<tr class="info">
' +
                        '                <td style="text-align: center">'+id+'</td>
' +
                        '                <td style="text-align: center">'+area+'</td>
' +
                        '                <td style="text-align: center">'+precipitation+'</td>
' +
                        '                <td style="text-align: center">'+month+'</td>
' +
                        '                <td style="text-align: center">'+releaseDate+'</td>
' +
                        '            </tr>';

                    tableStr=tableStr+oneRecord;//        ，       ，      
                }
                $("#rain_table").html(tableStr);//         

            });//ajax  end

        }//         end

    </script>
</head>
<body>
<div class="container">
    <div class="row">

        <table class="table table-bordered table-hover" id="rain_table">
            <caption style="text-align: center;font-size: 24px">      </caption>
            <tr class="success">
                <th style="text-align: center">id</th>
                <th style="text-align: center">  </th>
                <th style="text-align: center">   （mm）</th>
                <th style="text-align: center">  </th>
                <th style="text-align: center">    </th>
            </tr>
        </table>


        <nav aria-label="Page navigation">
            <ul class="pagination" id="fenyelan">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <span style="font-size: 24px" id="total_sp"> 2   ， 1 </span>
            </ul>
        </nav>



    </div>

</div>

</body>
</html>

7.효과 전시

이것 은 단지 간단 한 페이지 항목 일 뿐 바 이 두 페이지 의'앞 5 후 4'효과 가 없다.데이터 양 이 매우 많아 지면 이 페이지 는 매우 큰 공간 을 차지 할 것 이다.시간 이 있 으 면 다시 최적화 하 세 요.Jquery 코드 에 대해 서 는 코드 의 주석 에 이미 충분히 쓰 여 있 으 며,여 기 는 더 이상 설명 을 하지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.