JS 페이지 구현(동기 화 및 비동기)

페이지 기술 은 백 엔 드 페이지 와 전단 페이지 로 나 뉜 다.
전단 페이지
데 이 터 를 한꺼번에 모두 꺼 낸 다음 에 js 를 통 해 페이지 를 나 누 면 단점 이 있다.상품 표 dbgoods 가 있다 고 가정 하고 99999 만 개의 데 이 터 를 저장 하 며 조회 문 구 를 집행 한다.
4.567914.조회 구 조 를 4.567914 로 수신 하고 서버 가 이렇게 큰 데 이 터 를 전단 에 전달 하면 다운 로드 량 이 많 고 서버 의 압력 이 크다.
백 엔 드 페이지
백 엔 드 페이지 는 요청 할 때마다 한 페이지 만 조회 하 는 값 입 니 다.my sql 을 예 로 들 면(첫 번 째 조회 부터 8 개 조회)

select * from dbgoods order by id limit 0,8;

백 엔 드 동기 화 페이지
원리:빈 이 페이지 를 나 누 는 정 보 를 기록 해 야 한다.

public class PageBean{
 private long total;  //    
 private List<T> list; //   
 private int pageNum; //    
 private int pageSize; //      
 private int pages;  //    
 private int size;  //        <= pageSize，     ArrayList size  

우리 가 처음 불 러 올 때 첫 페이지 의 페이지 데 이 터 를 불 러 옵 니 다.

주의해 야 할 것 은
이전에 나 는 이렇게 sql 문 구 를 작성 하여 총 항목 수 를 얻 었 다.

select *from dbgoods ;
// Lits<goods> lists         ，        ，
//        ，         ，    
PageBean page=new PageBean();
page.setTotal=lists.size();

사실 정확 한 열기 방식 은:

select count(*) from dbgoods where 1=1 ;
//                ，int ，
//where 1==1       ， sql    

동기 화 이 보 를 실현 하고 jsp 인터페이스 에서 currentpage 파 라 메 터 를 servlet 로 전달 하 며 servlet 은 request 요청 을 통 해 파 라 메 터 를 얻 고 dao 층 데이터 베 이 스 를 통 해 조회 한 후에 데 이 터 를 jsp 인터페이스 로 전송 합 니 다.
브 라 우 저 에서 보 이 는 인터페이스 효 과 는 jsp-->servlet-->jsp(점프,사용자 체험 이 좋 지 않 음)입 니 다.
검색 상자 가 있 으 면 페이지 를 검색 할 때 검색 단 추 를 누 르 고 검색 데이터 가 jsp 인터페이스 에 전 달 될 때 jsp 는 이미 새로운 페이지 입 니 다.검색 상자 의 텍스트 상자 내용 이 사 라 졌 습 니 다.해결 방법 은 검색 을 클릭 할 때 텍스트 상자 의 값 도 request 요청 에 넣 고 servlet 에 함께 보 내 는 것 입 니 다.servlet 를 통 해 새로운 jsp 로 전달(매우 번 거 로 움)

두 가지 해결 방법:
(1)두 개의 인터페이스 와 같은 것 을 만 듭 니 다.하 나 는 모든 데 이 터 를 표시 하 는 데 사용 되 는 페이지 입 니 다.조 회 를 클릭 할 때 데 이 터 를 얻 은 후 다른 페이지(다음 페이지 클릭 이 벤트 는 검색 을 수행 하 는 경우)로 표시 합 니 다.
 （2)session 사용:검색 조 회 를 클릭 할 때 검색 조건 을 session 에 기록 하고 다음 페이지 를 클릭 할 때 session 의 값 을 판단 합 니 다.비어 있 으 면 모든 데이터 의 다음 페이지 를 실행 합 니 다.비어 있 지 않 으 면 session 의 값 을 꺼 내 서 검색 조건 이 있 는 검색 문 구 를 다음 페이지 에서 실행 합 니 다.번 거 로 운 점:session 의 소각 은 통제 하기 어렵 고 bug 가 쉽 습 니 다.
한 마디 로 하면 페이지 를 동기 화하 면 여러 가지 불쾌 함 이 있 을 수 있다.
Ajax 비동기 페이지

//jsp      ，      ，    
 function InitTable(currentpage)
     {
      $.ajax({
       type:"get",
       url:"CustomServlet?type=search&currentpage="+currentpage,
       async:true,
       dataType:"json",
       success:function(data)
       {
        DrawTable(data); //    
       }
      });
     }
function DrawTable(data) //       json    
     {
      //      
      $("#custom_all").text(data.pagelist.total);
     //      
$("#custom_currunt_page").text(data.pagelist.pageNum);
     //      
 $("#custom_all_page").text(data.pagelist.pages);
      var _th="<th><input id='cb_all' type='checkbox'></th>"
      +"<th>ID</th>"
      +"<th>    </th>"
      +"<th>    </th>"
      +"<th>   </th>"
      +"<th>  </th>"
      +"<th>    </th>"
      +"<th>  </th>"
      +"<th>QQ</th>"
      +"<th>    </th>"
      +"<th>    </th>"
      +"<th>    </th>";
      document.getElementsByTagName("tbody")[0].innerHTML=_th;
       for(var i=0;i<data.pagelist.list.length;i++)
       {
        var customerCreatetime= format(data.pagelist.list[i].customerCreatetime, 'yyyy-MM-dd');
        var _tr=document.createElement('tr');
        msg="<td><input type='checkbox'></td><td>"+data.pagelist.list[i].customerId+"</td><td>"+data.pagelist.list[i].customerName+"</td><td>"+data.pagelist.list[i].customerCompanyname+"</td><td>"+data.pagelist.list[i].customerContactname+"</td><td>"+data.pagelist.list[i].customerSex+"</td><td>"+data.pagelist.list[i].customerTelephone+"</td><td>"+data.pagelist.list[i].customerPhone+"</td><td>"+data.pagelist.list[i].customerQq+"</td><td>"+data.pagelist.list[i].customerEmail+"</td><td>"+data.pagelist.list[i].customerAddress+"</td><td>"+customerCreatetime+"</td>"
       _tr.innerHTML=msg;         
        document.getElementsByTagName("tbody")[0].appendChild(_tr);
       }
     }

처음 불 러 올 때 기본 호출

//     
      InitTable(1);

주의해 야 할 것 은 중점 이 왔 다 는 것 이다.
검색 할 때 전역 변수 mydata 를 정의 합 니 다.역할 영역 은 page 입 니 다.

var mydata="";

검색 단 추 를 누 른 이벤트 코드 를 살 펴 보 겠 습 니 다.

btns.eq(1).click( //        
          function()
         {
      //custom_dialog_form    form  ，                        mydata=$("#custom_dialog_form").serialize();
           $.ajax({
            type:"post",
            url:"CustomServlet?type=search&currentpage=1",
            async:true,
            dataType:"json",
            data:mydata, //    
            success:function(data)
            {
             DrawTable(data);
             $("#custom_dialog").css("display","none");
            }
           });
         }
          );

동기 화 된 검색 상황 에서 다음 페이지 에 접근 하 는 것 은 모든 데이터 의 다음 페이지 문제 입 니 다.

 function InitTable(currentpage) //         ，      
     {
      $.ajax({
       type:"get",
       url:"CustomServlet?type=search&currentpage="+currentpage,
       async:true,
       dataType:"json",
       success:function(data)
       {
        DrawTable(data);
       }
      });
     }
     function InitTableSearch(currentpage)//        ，    
     {
       $.ajax({
        type:"post",
        url:"CustomServlet?type=search&currentpage="+currentpage,
        async:true,
        dataType:"json",
        data:mydata,
        success:function(data)
        {
         DrawTable(data);
         $("#custom_dialog").css("display","none");
        }
       });
     }
//   
      $("#custom_btn_next").click(
        function ()
        {
         var currentpage=$("#custom_currunt_page").text(); //          
         var pages=$("#custom_all_page").text(); //     
         currentpage++;
         if(currentpage<=pages)
          {
          if(mydata=="") //      mydata    ，           
          {
          InitTable(currentpage);
          }
         else
          {
           InitTableSearch(currentpage); //      
          }
          }
        });

비동기 리 셋 이기 때문에 전역 변수 mydata 는 값 이 있 습 니 다.수 동 으로 페이지 를 리 셋 하여 다시 불 러 오 면 mydata 는 비어 있 고 무조건 검색 어 를 기본적으로 실행 합 니 다.검색 과 모든 다음 페이지 를 보 여 주 는 문 제 를 교묘 하 게 해결 하 였 으 며,이전 페이지 의 첫 페이지 끝 페이지 는 같 습 니 다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 페이지 의 실현(동기 화 와 비동기 화)입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다!