searchTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>searchTest.jsp</title>
<script src="../js/jquery-3.6.1.min.js"></script>
</head>
<body>
<h3>교재 검색</h3>
<form name="search" id="search">
<input type="text" name="keyword" id="keyword"/>
<input type="button" value="검색"/>
</form>
<script>
$("#keyword").keyup(function(){
alert("test");
});//keyup() end
</script>
</body>
</html>
BookCont.java
//결과확인 http://localhost:9095/book/search.do
@RequestMapping("book/search.do")
public String bookSearch() {
return "book/searchTest";
}//bookSearch() end
searchTest.jsp
<script>
$("#keyword").keyup(function(){
//alert("test");
//1) id="keyword" 값 가져오기
//let params = $("#keyword").val();
//alert(params);
//2)<form id="search"></form>
// 폼 안의 모든 컨트롤 요소들 가져오기
let params = $("#search").serialize();
alert(params);
});//keyup() end
</script>
<script>
$("#keyword").keyup(function(){
//alert("test");
if($("#keyword").val()==""){ //검색어가 존재하지 않으면
$("#panel").hide(); //출력결과 숨기기
}//if end
//1) id="keyword" 값 가져오기
//let params = $("#keyword").val();
//alert(params);
//2)<form id="search"></form>
// 폼 안의 모든 컨트롤 요소들 가져오기
let params = $("#search").serialize();
//alert(params);
$.post("searchproc.do", params, responseProc);
});//keyup() end
function responseProc(data) {
alert(data);
}//responseProc() end
</script>
BookCont.java
@RequestMapping("book/searchproc.do")
@ResponseBody
public String searchProc(HttpServletRequest req) {
String keyword = req.getParameter("keyword").trim();
String message = "";
return message;
}//searchProc() end
@RequestMapping("book/searchproc.do")
@ResponseBody
public String searchProc(HttpServletRequest req) {
String keyword = req.getParameter("keyword").trim();
String message = ""; //응답메시지
if(keyword.length()>0) { //검색어가 존재하는지?
//예) 검색어 : 자바
//"자바" "자바 프로그래밍" "자바 안드로이드" 반환
ArrayList<String> list = search(keyword);
message = list.toString();
}//if end
return message;
}//searchProc() end
public ArrayList<String> search(String keyword) {
//검색하고자 하는 문자열 목록
//예) where title like '%자바%'
String[] keywords = {"Ajax", "Ajax 실전 프로그래밍", "자바",
"웹프로그래밍", "웹마스터", "자바 프로그래밍",
"자전거", "자라", "JSP 프로그래밍",
"자바 안드로이드"};
//keyword를 keywords 배열에서 첫 글자부터 비교해서
//같으면 ArrayList에 저장해서 리턴한다
ArrayList<String> list = new ArrayList();
for(String word : keywords) {
word = word.toUpperCase();
if(word.startsWith(keyword.toUpperCase())) {
list.add(word);
}//if end
}//for end
return list; //"자바" "자바 프로그래밍" "자바 안드로이드"
}//search() end
@RequestMapping("book/searchproc.do")
@ResponseBody
public String searchProc(HttpServletRequest req) {
String keyword = req.getParameter("keyword").trim();
String message = ""; //응답메시지
if(keyword.length()>0) { //검색어가 존재하는지?
//예) 검색어 : 자바
//"자바" "자바 프로그래밍" "자바 안드로이드" 반환
ArrayList<String> list = search(keyword);
//message = list.toString();
//응답메시지 -> 갯수| 찾은 문자열, 찾은 문자열, 찾은 문자열, ~~
// 예) 3 | "자바" "자바 프로그래밍" "자바 안드로이드"
int size = list.size(); //3
if(size>0) {
message += size + " | ";
for(int i=0; i<size; i++) {
String title = list.get(i);
message += title;
if(i<size-1) { //맨 마지막 책 제목에는 , 를 붙이지 않기 위함
message += ",";
}//if end
}//for end
}//if end
}//if end
return message;
}//searchProc() end
searchTest.jsp
function responseProc(data) {
//alert(data);
//예) 3 | "자바" "자바 프로그래밍" "자바 안드로이드"
if(data.length>0) { //응답받은 내용이 있는지
let result = data.split("|"); // | 기호를 기준으로 문자열 분리
alert(result[0]); //3
alert(result[1]); //"자바", "자바 프로그래밍", "자바 안드로이드"
} else {
$("#panel").hide();
}//if end
}//responseProc() end
function responseProc(data) {
//alert(data);
//예) 3 | "자바" "자바 프로그래밍" "자바 안드로이드"
if(data.length>0) { //응답받은 내용이 있는지
let result = data.split("|"); // | 기호를 기준으로 문자열 분리
//alert(result[0]); //3
//alert(result[1]); //"자바", "자바 프로그래밍", "자바 안드로이드"
let title = result[1].split(",");
let str = ""; //최종 결과값
$.each(title, function(index, key){
//alert(index); //순서
//alert(key); //내용
str += "<a href='#'>" + key + "</a>";
str += "<br>";
});//each() end
$("#panel").html(str);
$("#panel").show();
} else {
$("#panel").hide();
}//if end
}//responseProc() end
'웹개발 교육 > Spring' 카테고리의 다른 글
| [74~5일] Spring (19) - MyBatis 프로젝트 (쓰기) (0) | 2022.11.11 |
|---|---|
| [74일] Spring (18) - MyBatis 프로젝트 (설정, 첫페이지, 목록) (0) | 2022.11.10 |
| [73일] Spring (16) - Ajax 이미지 출력 (0) | 2022.11.09 |
| [73일] Spring (15) - Ajax 아이디 중복 확인(cookie) (0) | 2022.11.09 |
| [73일] Spring (14) Ajax - 서버에서 응답 받기 (0) | 2022.11.09 |
