현재 버전

MVC Ajax Controller 통신

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>



수정 이력

2017-11-13 13:52:56 에 아래 내용에서 변경 됨 #2

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>


2017-11-13 13:52:56 에 아래 제목에서 변경 됨 #1

AJAX, Controller 통신 질문입니다