본문 바로가기
수업내용

20230629 jQeury

by titlejjk 2023. 6. 29. 
<script>
		$("#requestBtn").on("click", function(){
			$.ajax({
				url:"${pageContext.request.contextPath}/cafe/jason_list2.jsp",//요청 url
				method:"get",//요청방식
				data:{
					pageNum1
				},//요청파라미터
				success:function(data){
					console.log(data);
				}
			});
		});
	</script>

빨간색 영역은 페이지 로딩 시점에 함수가 등록이 되고

파란색 영역은 실제 버튼을 눌렀을 때 실행의 흐름이 들어오고 요청 파라미터까지

주황색 영역은 요청 파라미터까지 들어오면 success 함수가 실행이된다.

 

바닐라js에서 fech()보다 간단해서 좋은 것 같다.

 

jQuery를이용해서 페이지 로딩없이 페이지 번호를 만드는 Class를 만들어보겠다.

1.페이지의 내용 요청하기

.appendTo에 들어갈 요소는 미리 만들어져 있어야 하며 요소를 id로 만들어서 사용가능하다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step02_example.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" />
</head>
<body>
   <div class="container">
      <h1>ajax 요청을 통해서 받아온 데이터 사용하기</h1>
      <p> 페이지 전환없이 서버에 요청하는것을 ajax 라고 생각하면 된다.</p>
      <div>
         <table>
            <thead>
               <tr>
                  <th>번호</th>
                  <th>작성자</th>
                  <th>제목</th>
               </tr>
            </thead>
            <tbody id="one">
               
            </tbody>
         </table>
      </div>
      <nav>
         <ul class="pagination">
            
         </ul>
      </nav>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
   <script>
      //매개변수에 전달되는 페이지 번호에 해당하는 정보를 요청하는 함수
      function request(pageNum){
         //일단 clear!
         $("#one").text("");
         $(".pagination").text("");
         
         $.ajax({
            url:"${pageContext.request.contextPath }/cafe/json_list2.jsp",
            method:"get",
            data:{pageNum},
            success:function(data){
               //글목록
               const list=data.list;
               list.forEach(function(item){
                  //item 에는 글 하나의 정보가 들어 있다.
                  const td1=$("<td>").text(item.num);
                  const td2=$("<td>").text(item.writer);
                  const td3=$("<td>").text(item.title);
                  $("<tr>").append(td1).append(td2).append(td3).appendTo("#one");
               });
               
               if(data.startPageNum != 1){
                  let template=`
                     <li class="page-item">
                        <a class="page-link" href="javascript:request(\${data.startPageNum-1})">Prev</a>
                      </li>
                  `;
                  $(template).appendTo(".pagination");
               }
               //반복문 돌면서 페이지 출력하기 
               for(let i=data.startPageNum; i<=data.endPageNum; i++){
                  let template=`
                     <li class="page-item">
                        <a class="page-link \${pageNum == i ? 'active':''}" href="javascript:request(\${i})">\${i}</a>
                      </li>
                  `;
                  $(template).appendTo(".pagination");
               }
               if(data.endPageNum < data.totalPageCount){
                  let template=`
                     <li class="page-item">
                        <a class="page-link" href="javascript:request(\${data.endPageNum+1})">Next</a>
                      </li>
                  `;
                  $(template).appendTo(".pagination");
               }
            }
         });         
      }
      //페이지 로딩 시점에 1 페이지 내용을 요청한다.
      request(1);
   </script>
</body>
</html>

<tbody>와 <ul>은 비어있지만 <script>에서 구현해준다.

 

const temp = `
			<li>
				<a href=""></a>
			</li>
		`;

위 코드에서 <a>태그를 사용하려면 어떻게 해야 할까?

$(temp).find("a")를 통해 <a>태그를 지정하여 사용 가능하다.

그리고<a>태그에서 .parent를 통해 그 위에 부모 요소인<li>로 작업할수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step02_example2.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" />
</head>
<body>
   <div class="container">
      <h1>ajax 요청을 통해서 받아온 데이터 사용하기</h1>
      <p> 페이지 전환없이 서버에 요청하는것을 ajax 라고 생각하면 된다.</p>
      <div>
         <table>
            <thead>
               <tr>
                  <th>번호</th>
                  <th>작성자</th>
                  <th>제목</th>
               </tr>
            </thead>
            <tbody id="one">
               
            </tbody>
         </table>
      </div>
      <nav>
         <ul class="pagination">
            
         </ul>
      </nav>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
   <script>
		//test
		const temp = `
			<li>
				<a href=""></a>
			</li>
		`;
      //매개변수에 전달되는 페이지 번호에 해당하는 정보를 요청하는 함수
      function request(pageNum){
         //일단 clear!
         $("#one").text("");
         $(".pagination").text("");
         
         $.ajax({
             url:"${pageContext.request.contextPath }/cafe/json_list2.jsp",
             method:"get",
             data:{pageNum},
             success:function(data){
                //글목록
                const list=data.list;
                list.forEach(function(item){
                   //item 에는 글 하나의 정보가 들어 있다.
                   const td1=$("<td>").text(item.num);
                   const td2=$("<td>").text(item.writer);
                   const td3=$("<td>").text(item.title);
                   $("<tr>").append(td1).append(td2).append(td3).appendTo("#one");
                });
                //li요소의 template
                let template =`
                	<li lcass="page-item">
                		<a class="page-link" href="javascript:"></a>
                	</li>
                `;
                if(data.startPageNum != 1){
                  	$(template))
                      .find("a").text("Prev").on("click",function(){
                    	  //a요소를 클릭했을 때 새로운 자료를 요청한다.
                    	  request(data.startPageNum-1);
                      }).parent().appendTo(".pagination");
                }
                //반복문 돌면서 페이지 출력하기 
                for(let i=data.startPageNum; i<=data.endPageNum; i++){
                  	$(template)
                  	.find("a").text(i).addClass(pageNum==i ? "acitve":"").click(function(){
                  		request(i);
                  	}).parent().appendTo(".pagination");
                }
                if(data.endPageNum < data.totalPageCount){
                   $(template)
                   .find("a").text("Next").on("click", function(){
                	   //a요소를 클릭했을 때 새로운 자료를 요청한다.
                	   request(data.endPageNum+1);
                   }).parent().appendTo(".pagination");
                }
             }
          });         
       }
      //페이지 로딩 시점에 1 페이지 내용을 요청한다.
      request(1);
   </script>
</body>
</html>

 

'수업내용' 카테고리의 다른 글

20230703 댓글 기능 구현  (0) 2023.07.03
20230703 jQeury  (0) 2023.07.03
20230628 수업내용 Up/DouwnloadFile🤣🤣🤣  (0) 2023.06.28
20230628 수업내용🫡🫡🫡  (0) 2023.06.28
20230627 수업내용🤣🤣🤣  (0) 2023.06.27

관련글

댓글

티스토리툴바