(AJAX) bind() / 기본페이지보이기 / 검색기능

중복이 발생

url만 다를뿐 

중복코드를 줄이고, 페이지번호를 누르면 목록을 바로 출력하자

하단번호를 누르면 목록이 보인다.

 

window.addEventListener("load", function() {
	var section = document.querySelector("#ex10");
	var tbody = section.querySelector("tbody");
	var requestButton = section.querySelector(".btn-request");
	var pager = section.querySelector(".pager");
	
	function bind(url){//데이터를 화면에 연결
		var request = new XMLHttpRequest();
		request.onload = function() {
			var list = JSON.parse(request.responseText);

			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*/
		
		request.open("GET", url, true);//false 동기
		request.send(null);
	}

	pager.onclick = function(e) {
		e.preventDefault();

		if (e.target.tagName != "A")
			return;

		var page = e.target.innerText;//사용자가누른 페이지

		bind(`../api/notice/list?p=${page}`);	
	};

//request버튼누르면 목록나열
	requestButton.onclick = function(e) {
		bind("http://localhost:8080/api/notice/list");

	};/*requestButton*/
});

 

Q. 기본 1페이지가 로드되자마자 보이도록하려면?

bind()메소드를 밖으로 빼낸다.

로드되자마자 보이게됨

Q. 2페이지를 누르면 2페이지로 바뀌어야하는데, 밑으로 누적되서 나온다.

1페이지를 지워주고 2페이지가 보이도록하려면 ?

tbody.innerHTML = ""; tbody의 자식들을 지운다.

 

Q. 데이터가 요청된 후에 지워져야하므로 

onload안에서한다. 

 

Q. 검색기능추가

NoticeList.java에 필드(검색종류), 쿼리(검색내용) 변수를 넣는다.

변수들이 null 그리고 빈문자열이 아닐때 변수에 담아 getList에 넣고 전달한다.

 

작업중이라는것을 알리면서, 다른요청을 또 하지않도록

명령할수있는버튼을 다 가리기