[이론 + 코드] 1/18 화 Spring Framework - Ajax

동기식 : 요청을 하면 응답을 기다린다. 처리 방식이 느림

비동기식 : 다른일을 한다. callback함수 특징

 

spring에선 GSON보단 jackson을 사용한다.

          참고 자료 : https://tychejin.tistory.com/134

 

json : data-interchage format

 

Ajax 흐름

 

Ajax 서버 응답 방식

@RequestMapping("/boardList.do")
	public @ResponseBody List<Board> boardList() {
		List<Board> list = mapper.selectAll();
		// list ---- (Gson) ---- JSON(String)
		// [{  },{  },{  }]
		
		return list; // ajax() 함수 쪽으로 데이터를 전달
	}

@ResponseBody : 응답을하겠다, 알아서 json코드로 바꿔버림, 주는값이 있든 없든 넣어줌

---

each(data, 처리함수);

// 반복문
// index는 게시판의 순서 / 사용은 하지않음, 넘어올때 index순서와 data둘다 받아온다.
$.each(data, (index, vo)=>{ 
  			result+="<tr>";
  	  		result+="<td>"+vo.idx+"</td>";
  	  		result+="<td><a href='javascript:contentView("+vo.idx+")'>"+vo.title+"</a></td>";
  	  		result+="<td>"+vo.writer+"</td>";
  	  		result+="<td>"+vo.indate+"</td>";
  	  		result+="<td>"+vo.count+"</td>";
  	  		result+="</tr>";	  	
  	  		// 내용이 보여지는 부분을 미리 만들자
  	  		result+="<tr id='cv"+vo.idx+"' style='display:none;'>";	//display:block이라니라 display:table-row라고 해야한다!
  	  		result+="<td>내용</td>";
  	  		result+="<td colspan='4'>";
  	  		result+="<textarea id='c"+vo.idx+"' rows='6' class='form-control'>"+vo.content+"</textarea>";
  	  		result+="<br>";
  	  		result+="<button onclick='updateFn("+vo.idx+")' class='btn btn-success btn-sm'>수정</button>&nbsp";
  	  		result+="<button onclick='closeFn("+vo.idx+")' class='btn btn-warning btn-sm'>닫기</button>";
  	  		result+="</td>";
  	  		result+="</tr>";
  		});

---

 

* 람다식

$(document).ready(( )=>{		// 람다식(*)
		loadList();
});

* tr의 display 속성은  css를 유지하기 위해서는 display:block이라니라 display:table-row라고 해야한다!