Ajax예시 2 > 한 화면에 상세정보 띄우기

호출하기

<td><button onclick="detailAjax('${m.m_number}')">조회(ajax)</button></td>

<!-- ajax로 가져온 상세조회 결과를 여기에 보여줌 -->
 <div id="detail-view"> </div>
		

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

ajax

	<script>
	function detailAjax(m_number) {
		console.log(m_number);
		const view = document.getElementById('detail-view');
		$.ajax({
			type: 'post',
			url: 'detailAjax',
			data:{'m_number':m_number},
			dataType: 'json', //제이슨 형식으로 받아줘야 해서 @Respon으로 
			success: function(result){ //처리 결과를 받는 부분
				
				let output = "<table class='table'>";
				output += "<tr><th>number</th> <th>id</th> <th>password</th> <th>name</th>";
				output += "<th>email</th> <th>phone</th> </tr>";
				output += "<tr>";
				output += "<td>"+result.m_number+"</td>";
				output += "<td>"+result.m_id+"</td>";
				output += "<td>"+result.m_password+"</td>";
				output += "<td>"+result.m_name+"</td>";
				output += "<td>"+result.m_email+"</td>";
				output += "<td>"+result.m_phone+"</td>";
				output += "</tr>";
				output += "</table>";
				
				view.innerHTML = output;
				
			},
			error: function(){
				console.log('오타 찾으세요.')
			}
		});
	}
</script>

controller

@RequestMapping(value = "/detailAjax", method = RequestMethod.POST)
	public @ResponseBody BoardDTO detailAjax(@RequestParam ("b_number") long b_number) {
		BoardDTO board = bs.detail(b_number);
		return board;
	}

service repository mapper 로 detail 가져오기