20일 차 특이사항
1. 어제 ajax로 비동기 방식으로 페이징 처리를 하지 못했다. 다시 도전해 보자.
2. pageNumber를 받아서 이벤트가 발생한다. 페이징 넘버를 누르면 그것에 해당하는 데이터만 불러온다.
3. 완전히 잘못 접근하고 있었다. 컨트롤러를 따로 만들지 않았고, ajax가 작동하는 방식을 잘 알지 못했다.
기본원리 - jsp에서 데이터를 보내주고 controller에서 다시 데이터를 조작해서 ajax로 보낸다.
비동기 개념 정리
1. 동기식은 로딩이 걸림 (리로드 방식).
2. 비동기식은 뉴스 페이지 전환시 로딩이 없음 (success 콜백) 다시 돌아감.
3. 동기식 - submit, <a href = , location.href=
4. 비동기식 - ajax(j-query), xhr.response(잘 안 씀, 비동기식은 ajax를 많이 쓴다)
5. ajax 예제
- 일단 button type으로 바꿔야 된다. submit을 쓰지 않는다.
- data : 이 부분은 폼으로 묶고 serialize()를 하면 submit
- json {key : value} map = {key=value, key=value}
6. @ResponseBody 를 붙여서 넘겨준다.
7. ajax 만들 때는 컨트롤러를 따로 분리해서 만든다.
<비동기 방식 연습하기>
1) BoardController.java
// 비동기 테스트
@RequestMapping("/ajaxView")
public String ajaxView() {
return "ajaxView";
}
@RequestMapping("/ajaxProc")
@ResponseBody
public Map<String, Object> ajaxProc(@RequestParam Map<String, Object> map) {
System.out.println(map);
Map<String, Object> dataMap = new HashMap<String, Object>();
dataMap.put("aa", 123);
dataMap.put("data1", "11111");
dataMap.put("para1", "data123");
System.out.println(dataMap);
return dataMap;
}
2) ajaxView.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// var jsonData = {
// "aa":$("#txt1").val(),
// "bb":$("#txt3").val()
// }
// $("#frm").attr("action").submit();
$.ajax({
url : "ajaxProc",
type : "post",
data : $("#frm").serialize(),
// contentType : ,
// dataType
success : function(data){
data.aa
data.data1
console.log(data);
},
error : function(){
alert("error");
}
// data : JSON.stringify(jsonData);
// json { key : value} map = {key=value, key=value}
})
})
})
</script>
</head>
<body>
<form name = "frm" id = "frm">
<input type = "text" name = "txt1" id = "txt1">
<input type = "text" name = "txt2" id = "txt2">
<input type = "text" name = "txt3" id = "txt3">
<input type = "button" name = "btn" id = "btn" value = "버튼">
</form>
</body>
</html>
문제 발생
1. 검색기능을 ajax를 사용하여 비동기처리로 구현했다. 그러나 뭐가 꼬였는지 페이징처리가 되지 않는다. 내일 다시 고쳐봐야겠다.
2. 일단 검색기능 비동기처리를 해냈다. 잘했다.
'일경험' 카테고리의 다른 글
| [국민취업지원제도 일경험프로그램 22일차] JSTL이란 무엇인가? (0) | 2023.08.31 |
|---|---|
| [국민취업지원제도 일경험프로그램 21일차] 게시판 검색, 페이징 비동기 방식 (0) | 2023.08.30 |
| [국민취업지원제도 일경험프로그램 19일차] 동기 방식과 비동기 방식의 차이점 (0) | 2023.08.28 |
| [국민취업지원제도 일경험프로그램 18일차] 게시판 페이징 Dao, service 코드 (0) | 2023.08.25 |
| [국민취업지원제도 일경험프로그램 17일차] 게시판 검색, 게시판 페이징 (0) | 2023.08.24 |
