sisi
10
2017-11-12 23:22:17 작성 2017-11-13 13:52:56 수정됨
2
751

AJAX, Controller 통신 - id=result인 div에 searchChatroomList.jsp를 던져주기


MVC모델에서 컨트롤러와 AJAX간 통신에 대한 질문입니다.


간단히 설명드리자면.. 버튼을 누르면 id=result인 div에 searchChatroomList.jsp를 던져주는 것을 구현하고 싶습니다.

우선 2-1처럼 load 메소드를 사용했을 땐 정상적으로 작동이 되는데, AJAX를 이용하여 어떻게 같은 효과를 낼 수 있을지 궁금합니다.

일단 2-2 코드(동작X)를 짜 봤는데 id=result div에 searchChatroomList.jsp를 던져주는 것을 어떻게 구현해야 할지 모르겠네요.


도움 부탁드리겠습니다.

1. controller 부분

	@RequestMapping(params="method=searchChatroomList")
	public String searchChatroom(@RequestParam("keyword") String keyword, Model model) throws Exception {
		ArrayList<ChatroomListVO> chatroomList = chatroomListService.searchChatroom(keyword);
		model.addAttribute("chatroomList",chatroomList);
		return "searchChatroomList";
	}


2-1. load 메소드 사용

$(document).ready(function() {
	$("#button").click(function() {
		var keyword = $('#keyword').val();
		$("#result").load("chatroomlist.do?method=searchChatroomList", 
				{keyword: keyword
			});
	});
});



2-2. AJAX 사용

$(document).ready(function() {
	$("#button").click(function() {
		var keyword = $('#keyword').val();
		
		$.ajax({
			url: 'chatroomlist.do?method=searchChatroomList',
			type: 'GET',
			data: {keyword: keyword},
			success: function() {
				
			}, 
			error: function(er) { //에러발생시 경고창 생성
				alert(er);
			}
		});
	});
});



3. HTML


<div id = "search">
	<form action = "/chatroomlist.do" method="post">
		<input type="text" placeholder="검색어 입력" id="keyword"/>
	</form>
</div>

<button type="button" id="button">search</button>

<div id="result">
first
</div>


0
  • 답변 2

  • 쿵따리쿵쿵따
    270
    2017-11-13 08:47:00

    jsp페이지를 전체를 넘겨주신다는건가여?? 이게맞다면 컨트롤러단에서 ModelAndView로 리턴해주면 그jsp페이지 전체가 넘어갑니다.

    @RequestMapping("url")

    pulic ModelAndView test(){

      ModelAndView mav = new ModelAndView();

      mav.setViewName("searchChatroomList");

    }

    아작스에서 저기 url로 요청을하면 setViewName에서 설정한 jsp페이지가 아작스의 success:function(page)

    여기 변수 page로 넘어옵니다

    success:function(page){

      $("#result").html(page)

    }

    이렇게하면 저 넘어온 searchChatroomLis.jsp가 id가 result인 태그에 들어가게되는거죠

    원하시는게 이게 맞는지 잘모르겟네요

  • sisi
    10
    2017-11-13 10:25:11 작성 2018-01-26 22:50:06 수정됨
    네 잘 되네요!!!!!!! 감사합니다!!!
  • 로그인을 하시면 답변을 등록할 수 있습니다.