[내가 만든 프로젝트 코드 분석 | JSP게시판에 Ajax추가하기] 1.조회 화면 구성하기

Ajax는 요청을 서버로 보낼때 새로고침이 되지 않고 필요한 부분만 즉시 서버와 통신을 해서 정보를 출력하는 기법을 의미합니다.

기존에 만든 JSP게시판의 회원정보 테이블을 이용하여 조회 기능을 구현하고 검색시 Ajax기능을 활용해 검색어에 따라 화면이 그려지도록 구현하겠습니다. 

 

검색을 위한 입력창과 버튼을 생성하고 결과를 보여줄 테이블을 구현합니다.

	<div class="container">
		<div class="form-group row pull-right">
			<div class="col-xs-8"> // 12개부분 중 8만큼 차지하는 검색 부분
				<input class="form-control" type="text" size="20">
			</div>
			<div class="col-xs-2">
				<button class="btn btn-primary" type="button">검색</button> // 검색 버튼
			</div>
		</div>
		<table class="table" style="text=align: center; border: 1px solid #dddddd">
			<thead>
				<tr>
					<th style="background-color: #fafafa; text-align: center;">이름</th>
					<th style="background-color: #fafafa; text-align: center;">나이</th>
					<th style="background-color: #fafafa; text-align: center;">성별</th>
					<th style="background-color: #fafafa; text-align: center;">이메일</th>
				</tr>
			</thead>
			<tbody>
				<tr> // 예시 데이터 
					<td>강진호</td>
					<td>36</td>
					<td>남</td>
					<td>ggambopce.gamil.com</td>
				</tr>
			</tbody>
		</table>	
	</div>	
	
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>