Jsp ajax 검색기능 - jsp ajax geomsaeggineung

검색기능을 만드는데 핵심적인 포인트는 검색 기능의 form에서 어떻게 데이터를 넘겨주냐가 포인트다.

여기서 나 같은 경우는 JS를 사용해서 데이터를 직렬화(serialize)를 하여 ajax로 넘겨준 후 비동기로 처리하려고 했던게 매우 큰 문제였다. 

이런식으로 하면 안되고 form에서 action을 board페이지로 설정한 후에 method방식을 get으로 하여 데이터를 java에서 받아와야 한다.

일단 코드를 보자

1. JSP편

잡다한 코드는 보지말고 아래의 action과 method형식을 보자.

method는 get형식, action은 본래 사용하던 보드페이지 url 삽입

그리고 당연히 button의 type은 submit

<form class="d-flex" id="search" method="get" action="/news/stock" style="place-content: end; margin-right: 15px;">
    <input class="form-control me-2" type="search" name="search" placeholder="Search" aria-label="Search" required="required" style="width: 170px; height: 35px;">
    <button class="btn btn-outline-dark" type="submit" style="height: 35px; padding: 6px; font-size: 14px; width: 45px;">검색</button>
</form>

2. Controller편

get방식으로 받은 데이터, 즉 input의 name값을 requestParam으로 받아온다.

이제 대충 감이 오지 않는가? 나머지는 내가 항상 하던 방식으로 했다. requestparam으로 받은 값을 SQL쿼리 문을 적절히 활용하여 Model로 페이지로 넘겨주면 끝이다.

역시 데이터 받는 방식만 이해해주면 나머지 과정은 항상 하던 것이기 때문에 이해하는 것이 쉽다. 다행이다 휴... 

//	주식뉴스 페이지로 이동
//	뉴스 검색기능 포함
	@GetMapping("/stock")
	public String getnewsPage(Model m ,@RequestParam(value = "num", required = false, defaultValue = "1")String num, @RequestParam(value="search", required = false) String search) {
		String dbName = "newslistspecial";
		
		if(search == null) {
			
			m.addAttribute("pageList", svc.getpageList(Integer.valueOf(num), dbName));
			m.addAttribute("pageNumber", svc.getpageNumber(Integer.valueOf(num), dbName));
			
			return "/stockNews/stockNews";
		}
            else {
                search = "%" + search + "%";

                m.addAttribute("pageList", svc.getSearchPageList(Integer.valueOf(num), dbName, search));
                m.addAttribute("pageNumber", svc.getSearchPageNumber(Integer.valueOf(num), dbName, search));

                return "/stockNews/stockNews";
                }
            }

여기서 검색에 아무런 값이 없을 때, 즉 requestparam값이 null이면 전체 페이지를 출력하고 아닐 시 service에서 sql에서 적절한 데이터를 받아 재출력하면 된다.

3.SQL 쿼리 문

너무나 간단한 쿼리문이지만 도움이 될까 싶어 포스팅 - 아래의 orderby, group by는 제거해도 무방

<select id="getSearchPageList" resultType="com.tjoeun.midVO.newsVO" parameterType="String">
    SELECT * FROM ${dbName} GROUP BY title HAVING title LIKE #{search} ORDER BY num DESC
</select>

한 1시간 걸린 것 같은데 생각보다 시간 대비 배운 것이 많다.

알찬 1시간 바이

이번에는 게시판 검색 페이지를 만들어보겠습니다.

게시판 검색 형태는 다양합니다. 현재는 페이징이라던지 기능이 없는 상태이기에

단어 검색만 다뤄보겠습니다.

(추후 여러가지 검색을 다룰 예정입니다.)

작업순서는 아래의 순서로 진행하겠습니다.

• list.jsp 페이지 수정
• VO 변수 추가
• mapper.xml 검색 쿼리 추가

현재는 부트스트랩에 페이징과 검색부분이 적용되어 있습니다.

하지만 저희는 프로그램을 개발하는 목적이기때문에 해당 부분을 지우고 프로그램 개발을 해보도록 하겠습니다.

list.jsp

우선 테이블에 붙어있는 id="dataTable" 이 있는데 이 값이 있어서 자동으로 검색과 페이징이 되는 것입니다.

id값을 지워줍니다

<table class="table table-bordered" width="100%" cellspacing="0" style="text-align:center;">

그럼 기존 화면에서 페이징과 검색부분이 삭제된 것을 볼 수 있습니다.

깔끔하네요!!

그럼 검색부분을 꾸며줄 html 코드를 table div태그 위에 추가합니다.

검색이 가능하도록 form 태그를 만들어 주고, 그안에 id값을 생성하여 검색 함수(fn_search) 호출시에 

id값을 불러 submit이 가능하도록 설정합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<<script type="text/javascript">

$(document).ready(function() {

var msg = "${msg}";

if(msg != ""){
alert(msg);	
}

});


function fn_search(){
$("#listForm").submit();
return false;
}

</script>


<%@include file="../includes/header.jsp" %>

<form method="get"  id="listForm" action="/board/list">

<!-- Begin Page Content -->
<div class="container-fluid">

<!-- Page Heading -->
<h2 class="h3 mb-2 text-gray-800">Tables</h2>
<p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below.
  For more information about DataTables, please visit the <a target="_blank"
      href="https://datatables.net">official DataTables documentation</a>.</p>

<!-- DataTales Example -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
  </div>
  <!-- 검색[s] -->
  <div class="card-header py-3">
      <input type="text" id="searchKeyword" name="searchKeyword" value="" style="width:300px; height:40px;" placeholder="검색어를 입력하세요." />
<a href="#" onclick="fn_search();" class="btn btn-primary">검색</a>
  </div>
<!-- 검색[e] -->

boardVO.java

VO에 검색 변수를 만들어줍니다. 물론 get/set도요~

private String searchKeyword;

public String getSearchKeyword() {
	return searchKeyword;
}
public void setSearchKeyword(String searchKeyword) {
	this.searchKeyword = searchKeyword;
}

BoardMapper.xml

where절에 검색변수에 값을 넣어줍니다.

searchKeyword 가 비어있지 않다면 입력된 값이 제목 또는 작성자와 매칭시켜주는 작업이죠
그리고 list문에  include를 설정해줍니다.

<sql id="boardtWhere" >
where 
	1=1
<if test="searchKeyword != null and searchKeyword != ''">
	<![CDATA[ 
	 AND 
		( 
		board_title like concat('%',#{searchKeyword},'%') OR
	    board_content like concat('%',#{searchKeyword},'%') 
		 )  
	 ]]> 
</if>
</sql>


<select id="getList" parameterType="com.spring.web.vo.boardVO" resultType="com.spring.web.vo.boardVO">
<![CDATA[
	select
		*
	from
		tbl_board
]]>
<include refid="boardtWhere"/>
</select>

검색을 해보면 검색이 잘 되지만 검색후 검색단어가 사라지는 것을 볼 수 있습니다.

list 검색값을 넣어주어야합니다.

list.jsp

<!-- 검색[s] -->
<div class="card-header py-3">
    <input type="text" id="searchKeyword" name="searchKeyword" value="${searchVO.searchKeyword}" style="width:300px; height:40px;" placeholder="검색어를 입력하세요." />
<a href="#" onclick="fn_search();" class="btn btn-primary">검색</a>
</div>
<!-- 검색[e] -->

그럼 검색어도 잘 붙어있고 검색도 잘 되는 것을 볼 수 있습니다.