[스프링프로젝트연습 12] 스프링프로젝트 구현 - ajax사용 /CRUD-SELECT

11장에 이어서 CRUD 중 R(read)에 해당하는 SELECT 관련 내용을 설명한다.
테스트 단계이므로 그리드 등의 API는 사용하지 않고 일반 테이블로 작성한다.

 

2.    SELECT

ㄱ.   화면 뷰 수정 (JSP)

   -     home.jsp 파일에 사용자 아이디, 이름을 조회조건으로 두고 데이터베이스에 저장된 리스트를 조회하여 화면 테이블에 출력하고자 한다.

   -     “조회” 버튼을 아래에 배치하여 저장된 정보를 조회하도록 (컨트롤러를 호출하도록) 한다.

   -     버튼에 대한 이벤트 처리 스크립트를 작성한다.

 

<p>2. DATA SELECT</p>
	<div style="width: 50%; border: 1px solid gray; padding: 15px; display: grid;">
		<label>ID</label>
		<input type="text" id="searchUserId">
		<br/>
		<label>Name</label>
		<input type="text" id="searchUserName">
		<br/>
		<button id="btnSearch">Search</button>
	</div>
	<br/>
	<table style="width: 50%; border: 1px solid gray; padding: 15px;">
		<thead>
			<tr>
				<th>ID</th>
				<th>PASSWORD</th>
				<th>NAME</th>
				<th>TEL</th>
				<th>EMAIL</th>
				<th>INPUT DATETIME</th>
			</tr>
		</thead>
		<tbody id="tbl">
		</tbody>
	</table>

 

  -   <tbody id="tbl"> 이 태그에 데이터가 출력되도록 할 것이다.

 

ㄴ.   버튼 이벤트 처리 (Javascript / JQuery / Ajax)

-      위에서 작성한 button 을 클릭하는 경우 ID, NAME의 정보를 컨트롤러로 전달하여 데이터를 조회할 수 있도록 ajax 호출 부분을 작성한다.

<참고>

for(var i = 0; i < data.length; i++) {}

위의 for문의 경우에는 자바스크립트로 작성된 for 반복문임.

 

제이쿼리를 이용하여 아래와 같이 사용할 수도 있다.

$.each(data, function(I, item) {})

l  i : 배열 객체의 인덱스 (0 부터 1씩 증가된 값이 출력된다.)

l  item : data[i] 와 같은 개념, 배열 객체의 1줄을 의미한다.

 

 

ㄷ.   컨트롤러 메소드 작성 (JAVA)

-      Ajax 를 통해 호출될 컨트롤러 메소드 작성을 위해 MainController.java 파일을 수정한다.

// 2. DATA SEARCH
    @RequestMapping("/main/searchList.do")
    @ResponseBody
    public List<Map<String, Object>> searchList(@RequestBody Map<String, Object> params) {
    	
    	System.out.println("2. DATA SEARCH");
    	
    	List<Map<String, Object>> list = mainMapper.searchList(params);
    	
        return list;
    }

 

-      조회용 쿼리인 경우에는 1건~여러건의 결과값을 도출하기 때문에 리턴 타입을 List 형태로 화면에 리턴하여 준다.              (Map이 여러 개 쌓여서 리스트 형태로..)

-      Map 형태의 파라미터 정보를 전달받아 쿼리 호출 시 전달하여 준다.

 

ㄹ.   매퍼 인터페이스 및 쿼리 XML 작성 (JAVA / XML)

-      select 쿼리문 작성을 위한 쿼리 XML 파일 및 매퍼 인터페이스를 작성한다.

-      MainMapper.java 파일 내에 아래 내용을 추가

 

// 2. DATA SEARCH
	public List<Map<String, Object>> searchList(Map<String, Object> map);

 

-      MainMapper.xml 파일 내 select 쿼리 구문을 작성한다.

 

<!-- 2. DATA SEARCH -->
	<select id="searchList" parameterType="hashmap" resultType="hashmap">
		SELECT USER_ID
			 , USER_PWD
			 , USER_NAME
			 , USER_AUTH
			 , USER_TEL
			 , USER_EMAIL
			 , DATE_FORMAT(INPUT_DATETIME, '%Y-%m-%d %T') AS INPUT_DATETIME
		  FROM TBL_USER_INFO
	 	 WHERE 1=1
	   <if test="!userId.equals('')">
	       AND USER_ID LIKE CONCAT('%', #{userId}, '%')
	   </if>
	   <if test="!userName.equals('')">
	       AND USER_NAME LIKE CONCAT('%', #{userName}, '%')
	   </if>
	</select>

 

l  DATE_FORMAT(INPUT_DATETIME, '%Y-%m-%d %T') AS INPUT_DATETIME : 저장된 시간 정보를 2023-05-01 12:00:20 형태로 출력하기 위한 날짜 포맷 (검색 키워드 – mysql date 포맷)

 

l  <if test="!userId.equals('')"> : if 문과 동일하게 파라미터(userId) 값이 공백이 아닌(!) 경우에 안에 있는 구문이 실행되도록 한다. 즉, 조회조건을 아무것도 입력하지 않은 경우에는 안에 있는 구문이 생략되어 테이블의 모든 리스트가 조회되는 것이다.