Ajax 페이지들 관계 정리 2 - 집중화

(js 22일차)

 

같은 기능을 하는 함수를 만들어서 두루두루 쓸 수 있도록 한다. 

 

1. 데이터를 가지고 와서 화면에 출력하는 기능의 함수를 만들어보자.

(여기서 bind) 

 

XMLHttpRequset() 생성시키고, open,send, 데이터 꽂아넣기... 다 아래서 이미 했던 내용! 그래서 복붙시킨다. 

 

이렇게 길었던 코드가 어떻게 간단해졌는지 아래서 확인 >.<!

 

url로만 수정

 

쨘!

bind 함수를 이용해서 이렇게 간단하게 표현이 가능하게 됐다! 

---

2. '1'을 누르면 1에 관한 목록이 화면에 보이도록 해보자

목표 - 누를때마다 화면 바뀌게 하기!

준비 1 - (데이터 오기 전) 비워두는 작업

준비 2 - 화면 속 'click' 버튼은 이제 필요 x 

 

옆에 한 줄 남겨둔 이유는 click 버튼 삭제해서 btnRequest에 이벤트 줄 일이 없어졌는데,

지금 하려는 1,2,3,4,5 데이터 가지고 오는 url이 같아서 남겨둔 것 같다. 

 

준비 3 - 검색 폼을 추가하자

<section class="search-form">
<h1>검색 폼</h1>
<form action="list.jsp" method="get">
<label class="d-none">검색분류</label> <select name="f">
<option value="">분류선택</option>
<option value="title">제목</option>
<option value="writer_id">작성자</option>
</select>
<label class="d-none">검색어</label>
<input type="text" name="q" value="">
<input type="submit" value="검색">
</form>
</section>

html에 추가

Q. 근데 왜 풀렸지? 들어가자마자 이 모습이당

 

'검색' 버튼을 누르면 새로고침되는게 아니라, list.jsp로 요청이 갈 것 (저기로 get 요청이 이뤄져서 열려고 할 것)

 

Q. 우선, '검색' 버튼 눌렀을 때 console에 test를 찍어보자

이 오류가 뜬다. 우선 더 진행해보자

 

우리는 검색을 해야함(분류선택, 검색값을 가지고) 검색 버튼 눌렀을 때 url만 잘 주면 되는 것 (bind 만들어줘서...) page, field, query 이렇게 값을 전달 - 그러면 L에서 받아야 - 사용자가 전달한 3개의 값을 받아야 (지금까지 page밖에 안받았는데)

기본값 할 건지 말던지도 정해야 하고~ 

기본 값 쓸건지, 넘겨온 값 쓸건지도 ~ 

 

근데 사실 검색 처음할 때 page는 무조건 1로 보내거나 아예 안보내는게 맞다. 

(p=1 혹은 p 없이 그냥 f, q값만)

- 1페이지를 눌러야만 목록이 보이는것도 이상한거니 

Q. 근데 여기서 field와 query값은 어떻게 얻어오지? 

 

ex1.html

html에서 JavaScript로 값을 얻어오면 되는 것

 

.value 하면 된다. 

 

*오류 잡는 중*

7번째줄. query 오타 있고

bind 함수 이용해주고~ 

---

 

집중화 전 js 코드

window.addEventListener("load", function() {
	var section = document.querySelector("#ex10");
	var btnRequest = section.querySelector(".btn-request");
	var tbody = section.querySelector("tbody");
	var pager = section.querySelector(".pager");

	pager.onclick = function(e) {
		e.preventDefault(); // 태그의 원래! 속성을 막기 위해 (a태그는 화면 전환 - 이걸 막기 위해)
		
		if(e.target.tagName != "A")
			return; // 버블링(찾아보깅) 해주기 위한 조건들!
			
		var page = e.target.innerText;	// 그 안의 text들을 page에 담음 for 22행
		
		var request = new XMLHttpRequest();
		request.onload = function(e){
			console.log(request.responseText); // 웹 문서의 텍스트들
		}
		request.open("GET", `../../api/notice/list?p=${page}`, true);
		request.send(null);
	
	}

	btnRequest.onclick = function(e) {
		var request = new window.XMLHttpRequest();
		/*request.onreadystatechange = function(){
			console.log(request.responseText);
		}*/
		request.onload = function() {
			var list = JSON.parse(request.responseText);
			/*			console.log(list[0].id);
						console.log(list[0].regDate);*/
			var trEmpty = tbody.querySelector(".empty");
			if (list.length > 0 && trEmpty != null) // 없은 거를 없애도록 하면 안 됨
				trEmpty.remove();

			for (var i = 0; i < list.length; i++) {
				var tr = `<tr>
							 <td>${ list[i].id} </td>
							 <td>`+list[i].title+`</td>	
						   </tr>`;
				tbody.insertAdjacentHTML("beforeend", tr);
			}
		}
		request.open("GET", "http://localhost:8080/api/notice/list", true);
		request.send(null);
	}
});

집중화 전 html 코드

<section id="ex10">
		<h1>Ajax</h1>
		<div>
			<input class="btn-request" type="button" value="click">
		</div>	
		<template id="tr-template">
			<tr>
				<td>1</td>
				<td>안녕하세요</td>	
			</tr>
		</template>
		<table border="1">
			<thead>
				<tr>
					<td>아이디</td>
					<td>제목</td>	
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="empty" colspan="2">레코드가 존재하지 않습니다. </td>
				</tr>
			</tbody>
		</table>
		<div class="pager">
			<ul>
				 <li><a href="">1</a></li>
				 <li><a href="">2</a></li>
				 <li><a href="">3</a></li>
				 <li><a href="">4</a></li>
				 <li><a href="">5</a></li>
			</ul>
		</div>
	</section>