- 프로세서
- 초기화면 호출
- 화면 단에서 조건 검색
- keyup:이벤트로 처리 : 이벤트로 처리 입력시, 조회내용을 화면에 뿌려줌
- dataType : html
- 조건 내용에 대한 부분을 Controller로 호출
- jsp화면 호출.. -> html
- 결과물은 초기화면에 불러서 뿌려줌
- 개발순서
- Controller
- 초기화면호출 메서드 구현 method=init
- View단(초기화면)
- emplist
- 검색 text : ename, job
- keyup() 이벤트 처리
- 검색(query String) : ename = @@@&job =@@@
- $.ajax
- url : emp.do?method=ajaxlist
- dataType:"html"
- data:queryString(값)
- $.post(방식2)
- 주소,queryString,처리후, 함수
- Controller 호출,emp.do?method=ajaxlist
- db연결 후, 결과값 jsp로 가져옮
- 원본 View단에 결과값 html을 리턴
- 보낼 객체를 queryString 형태로 만듬
- 결과 값은 페이지 자체를 받는식으로 해서 div에 뿌려줌
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$("input").keyup(function(){
//queryString 형식
//받는객체의 setXXX 를 타고 알아서 세팅됨
var send="title="+$("#title").val()+"&wirter="+$("#writer").val();
$.ajax({
url:"ajaxboard.do?key=sch",
data:send,
dataType:"html",
method: 'post',
success:function(data){
//page 자체를 받아서 div에 넣는식
$("div").html(data);
},error:function(request,status,error){
alert("code:"+request.status+"\n"+"message:"
+request.responseText+"\n"+"error:"+error);
}
})
})
| cs |
- 받는 Ctrl 부분
- parameter (Board ) 객체에 setXXX 메서드를타고 queryString 에으로 보내진 문자열의 XXX=값이 자동으로 set되면서 객체가 만들어짐
- return page는 jsp page
1
2
3
4
5
6
7
|
@RequestMapping(params="key=sch")
public String form02(Board sch,Model d){
d.addAttribute("alllist", service.schBoard(sch));
return "c03_AjaxExp/a02_BoardData";
}
| cs |
- return page 부분
- 자체적으로 페이지를 만들어서 그 결과 값을 html data로 return
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<table>
<tr>
<td>no</td>
<td>title</td>
<td>content</td>
<td>writer</td>
<td>regdte</td>
<td>updte</td>
<td>refno</td>
<td>readcnt</td>
</tr>
<c:forEach var = "list" items="${alllist}">
<tr name="goDetail">
<td>${list.no}</td>
<td>${list.title}</td>
<td>${list.content}</td>
<td>${list.writer}</td>
<td>${list.regdte}</td>
<td>${list.updte}</td>
<td>${list.refno}</td>
<td>${list.readcnt}</td>
</tr>
</c:forEach>
</table>
| cs |
ㄴㄴ
댓글 없음:
댓글 쓰기