고래씌
[JSP] 6-3. AJAX(게시글 리스트 검색, XML데이터 가져오기, 파일 업로드 처리) 본문
1. ajax를 이용한 자동완성 구현하기
- JSP_Project1 프로젝트 안에 com-kh-board 폴더와 common 폴더 복사후, Ajax_Project 프로젝트에 com-kh폴더안에 붙여놓기
- JSP_Project1 프로젝트 안에 sql 폴더를 Ajax_Project 프로젝트의 com폴더와 같은 위치에 붙여놓기
- lib에 JSP_Project1에 사용하였던 "ojdbc6.jar" 파일과 "cos-2022.2.jar" 파일 붙여놓기
▶ index.jsp
<h2>5. ajax를 이용한 자동완성 구현하기</h2>
<input type="text" id="keyword" placeholder="찾을 게시글을 입력하세요." list="list">
<datalist id="list">
</datalist>
<script>
$(function(){
$("#keyword").keyup(function(e){
$.ajax({
url : 'jqAutoSearch.do',
data : {keyword : $("#keyword").val()},
success : function(data){
$("#list").html(""); // 리스트 비워주기
console.log(data)
let str = "";
for(let board of data){
str += `<option>${board.boardTitle}</option>`
}
$("#list").html(str);
}
})
})
})
</script>
▶ AutoCompleteControlle.java
package com.kh.controller;
import java.io.IOException;
import java.util.ArrayList;
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 com.google.gson.Gson;
import com.kh.board.model.service.BoardService;
import com.kh.board.model.vo.Board;
/**
* Servlet implementation class AutoCompleteController
*/
@WebServlet("/jqAutoSearch.do")
public class AutoCompleteController extends HttpServlet {
private static final long serialVersionUID = 1L;
public AutoCompleteController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String keyword = request.getParameter("keyword");
// BOARD테이블에서 keyword값을 포함하고 있는 제목을 가진 게시글을 모두 조회
ArrayList<Board> list = new BoardService().searchList(keyword);
response.setContentType("application/json; charset=UTF-8");
new Gson().toJson(list,response.getWriter());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
▶ BoardService.java
▶ board-mapper.xml
▶ BoardDao.java
2. XML 데이터 가져오기
▶ index.jsp
<h2>6. xml데이터 가져오기</h2>
<button id="xmlTest">xml데이터 가져오기</button>
<div id="fiction">
<h2>소설</h2>
<table id="fiction-info">
</table>
</div>
<div id="it">
<h2>프로그래밍</h2>
<table id="it-info">
</table>
</div>
<!-- 외부 데이터를 응답받고 넘겨받을 때 많이 사용(json, xml) -->
<script>
$(function(){
$("#xmlTest").click( () => {
$.ajax({
url : 'books.xml',
success : data => {
console.log(data);
// 깊은 복사
let ficheader = "<tr><th>제목</th><th>저자</th></tr>";
let itheader = ficheader;
// 후손 요소를 찾는 함수 : find
let books = $(data).find(":root").find("book"); // .find(":root") == .find("books") 와 같다
console.log(books);
books.each( function(index, elem) {
const info = `<tr>
<td>${$(elem).find("title").text()}</td>
<td>${$(elem).find("author").text()}</td>
</tr>`;
const subject = $(elem).find("subject").text(); // 소설, 프로그래밍, 만화
if(subject === "소설"){
ficheader += info;
}else if (subject === "프로그래밍"){
itheader += info;
}
})
$("#fiction-info").html(ficheader);
$("#it-info").html(itheader);
}
})
})
})
</script>
▶ web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<display-name>Ajax_Project</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
3. Ajax를 이용한 파일 업로드 처리
▶ index.jsp
<h2>
7. Ajax를 이용한 파일 업로드 처리
</h2>
<input type="file" id="upfile" multiple>
<button id="upfile-btn">파일전송</button>
<script>
$(function(){
$("#upfile-btn").click(function(){
// 파일 전송시 필요한 FormData 객체 생성
const form = new FormData();
form.append("name","이고래"); // <input type="text" name="name" value="이고래" /> 이 데이터를 보낸다.
// formData.append(name, value) – name과 value를 가진 폼 필드를 추가
// formData.append(name, blob, fileName) – <input type="file">형태의 필드를 추가.
// 세 번째 인수 fileName은 (필드 이름이 아니고) 사용자가 해당 이름을 가진 파일을 폼에 추가한 것처럼 설정해줌
// formData.delete(name) – name에 해당하는 필드를 삭제
// formData.get(name) – name에 해당하는 필드의 값을 가져옴
// formData.has(name) – name에 해당하는 필드가 있으면 true를, 그렇지 않으면 false를 반환
// form.append("upfile", upfile.files[0]) // <input type="text" name="upfile" value="upfile.files[0]">
// console.log(upfile.files);
$(upfile.files).each(function(index, file){
form.append("upfile"+index, file)
})
console.log(upfile.files);
$.ajax({
url : "fileUpload.do", // "fileUpload.do"로 요청을 보내면 key value형태로 담겨져 있음
data : form,
type : 'post',
contentType : false,
processData : false,
success : function(){
alert("업로드 성공");
}
})
})
})
</script>
①
| form.append("name", "이고래"); |
=> <input type="text" name="name" value="이고래" /> 이 데이터를 보낸다.
② console.log(upfile.files)를 통해 확인되는 것을 알수 있음
form.append
③
| $(upfile.files).each(function(index, file){ form.append("upfile"+index, file) }) |
- $(upfile.~ ) => 위에 <input type="file" id="upfile" multiple>에 있는 id값인 upfile이다.
자바스크립트는 id값 "#" 생략가능하다.
- upfile.files => files는 upfile를 담아주는 filelist이다.(배열) 이것은 console.dir(upfile)를 통해 확인해보면
내부에 정의된 FileList인 것을 확인할 수 있다.
▶ AjaxFileUploadController.java
package com.kh.controller;
import java.io.IOException;
import java.util.Enumeration;
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 com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
/**
* Servlet implementation class AjaxFileUploadController
*/
@WebServlet("/fileUpload.do")
public class AjaxFileUploadController extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxFileUploadController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String savePath = request.getServletContext().getRealPath("/upload/");
// / 첫번째 슬래시가 => WebContent를 가리킴
MultipartRequest multi = new MultipartRequest(request, savePath, 20*1024*1024, "UTF-8",
new DefaultFileRenamePolicy());
// 파일명 수정해주는 기본 객체를 제공해줌 => DefaultFileRenamePolicy()
Enumeration e = multi.getFileNames();
// 향상된 반복문을 돌릴 수 있음
while(e.hasMoreElements()) { // 다음 값이 있는지 없는지 검사
String filename = (String) e.nextElement(); // upfile0, upfile1, upfile2 ...
// 반환형이 Object이기 때문에 다운캐스팅 해줌
System.out.println("파일의 원본명 : " + multi.getOriginalFileName(filename));
System.out.println("파일의 수정명 : " + multi.getFilesystemName(filename)); // 파일 수정명
}
}
}
- Web Content 바로 아래에 "upload" 폴더 생성
=> 3개의 파일을 선택하고 파일 전송을 클릭하면 [upload] 폴더에 내가 선택했던 파일이 업로드되어 있음
=> 이와 같이 출력됨
'Server > JSP과 Servlet' 카테고리의 다른 글
| [JSP] 7-1. Action Tag (EL 기본 구문) (0) | 2023.12.18 |
|---|---|
| [JSP] 6-4. 아이디 중복체크 기능, 댓글 기능 (0) | 2023.12.15 |
| [JSP] 6-2. AJAX (Gson ,ArrayList 받기) (0) | 2023.12.14 |
| [JSP] 6-1. AJAX 개요, get&post방식으로 서버에 데이터 전송 및 응답(ajax 통신, json) (0) | 2023.12.14 |
| [JSP] 5-4. 사진게시판(썸네일) (0) | 2023.12.13 |
'Server/JSP과 Servlet' Related Articles
more
