티스토리 뷰
명세서 다시 보기
jQuery를 사용하여 Ajax 요청을 보내고, 응답을 처리하여 HTML을 동적으로 생성하는 기능을 구현한 것이다.
- type : HTTP 요청 방식-> GET
- url : 서버로 요청할 URL -> ../search.do
여기서 '..'은
현재 페이지의 URL이 'http://localhost:8080/Web08_Ajax/03_JQuery_Ajax/index.html'인 경우,
'../search.do'는 'http://localhost:8080/Web08_Ajax/search.do'로 해석된다.
'03_JQuery_Ajax' 디렉토리의 상위 디렉토리인 'Web08_Ajax'로 이동하라는 의미
- data : 요청 시 함께 전송할 데이터
여기서는 'keyword'라는 이름으로 사용자가 입력한 검색어를 전송
- success : 요청이 성공했을 때 실행할 콜백 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<title>Insert title here</title>
</head>
<body>
<h3>검색 키워드를 입력하세요.</h3>
<p>
검색 : <input type="text" id="txt">
</p>
<p>
추천 : <br><span id="txtHint"></span>
</p>
<script type="text/javascript">
$(document).ready(function(){
$('#txt').keyup(function(){
let keyword = $('#txt').val();
console.log(keyword);
// Ajax 요청 보내기
$.ajax({
type: 'get', // HTTP 요청 방식은 GET
url: '../search.do', // 서버로 요청할 URL
data: {'keyword': keyword}, // 요청 시 함께 전송할 데이터 (여기서는 'keyword'라는 이름으로 사용자가 입력한 검색어를 전송)
success: function(result) { // 요청이 성공했을 때 실행할 콜백 함수
console.log(typeof(result)); // 응답 데이터의 타입을 콘솔에 출력
// JSON 형식의 응답 데이터를 JavaScript 객체로 변환
let obj = JSON.parse(result);
let list = ''; // HTML 리스트를 저장할 변수
// 응답으로 받은 객체를 순회하며 HTML 리스트 아이템을 생성
for (let x in obj) {
list += "<a href='https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=" + obj[x].title + "'>" +
obj[x].title + '</a><br>'; // 각 아이템은 제목과 해당 제목을 검색하는 네이버 링크로 구성
}
// 생성한 HTML 리스트를 화면의 특정 요소에 삽입
$('#txtHint').html(list);
}
});
}); // end txt.keyup()
}); // end document
</script>
</body>
</html>
package edu.web.ajax;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static SearchDAOImple dao;
public SearchServlet() {
dao = SearchDAOImple.getInstance();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String keyword = request.getParameter("keyword");
System.out.println(keyword);
List<String> list = dao.select(keyword);
System.out.println(list.toString());
JSONArray jsonArray = new JSONArray();
for(String title : list) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("title", title);
jsonArray.add(jsonObject);
}
response.setCharacterEncoding("UTF-8");
response.getWriter().append(jsonArray.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
request.setCharacterEncoding() :
서버에서 문자를 가져올 때, 한글이나 다른 문자가 포함된 데이터가 깨지지 않고 잘 표시되게 해준다
request.getParameter() :
request 에서 'keyword' 매개변수를 읽어온다.
dao. select() 를 사용하여 해당 검색어에 대한 결과를 데이터베이스에서 가져온다.
검색 결과를 리스트로 받아온 후,
JSONObject를 생성하여 각 항목의 제목을 담고,
JSONArray에 추가한다.
서버에서 클라이언트로 문자를 가져올때, 한글이나 다른 문자가 포함된 데이터가 깨지지 않고 잘 표시되게 해준다
JSON 형식의 결과를 클라이언트에게 전송한다.
'백엔드 교육과정 > 4월' 카테고리의 다른 글
| 2024.04.12 _ jsp Servlet 을 이용한 게시판 만들기 실습 (0) | 2024.04.12 |
|---|---|
| 2024.04.11_ jsp Servlet MVC 패턴 (0) | 2024.04.11 |
| 2024.04.09 _ SSR & CSR , JQuery_Ajax, 퀴즈 (0) | 2024.04.09 |
| 2024.04.08 _ JSP Servlet ( form형태 get/post 데이터 처리 방식 ) , JSON, JSTL, AJAX (0) | 2024.04.08 |
| 2024.04.05_ HW4(회원가입 및 로그인 홈페이지) 문제해결 / (0) | 2024.04.05 |