[JSP] 25. jQuery와 Ajax 멀티 파일 업로드(개선), POST전송, JSON - 구성하기(2)
1부에 이어서 계속 소개하도록 하겠다.
1. [JSP] 24. jQuery와 Ajax 멀티 파일 업로드(개선), POST전송, JSON - 구성하기(1), 2020-10-03
12. jQuery 다운받기
사이트에 접속한다.
그림 19. jQuery 다운로드 사이트 (2020-10-03 현재 모습)
이 글에서는 "Download the uncompressed development jQuery 3.5.1"을 사용하였다.
그림 20. jQuery 다운로드 위치
1단계: 프로젝트 폴더를 찾는다.
2단계: /src/main/webapp/에 들어간다.
3단계: js폴더를 만든다.
4단계: /src/main/webapp/js/jquery-3.5.1.js를 넣어준다.
13. Controller - /board/ListJSONController.java
경로: /src/main/java/com/example/web/controller/board/ListJSONController.java
package com.example.web.controller.board;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
import com.example.web.controller.Controller;
import com.example.web.model.CompUsers;
public class ListJSONController implements Controller {
@Override
public void execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
// 1. 공통 선언
res.setCharacterEncoding("UTF-8");
res.setContentType("application/json");
// 1-1. ArrayList만 사용할 경우의 반응(방법 1)
/*
// 컬렉션 타입
ArrayList<CompUsers> list = new ArrayList<CompUsers>();
list.add(new CompUsers("user","mole", 1));
list.add(new CompUsers("sumin", "pass", 0));
list.add(new CompUsers("smkim", "php", 1));
PrintWriter out = res.getWriter();
//
JSONObject jsonList = new JSONObject();
JSONArray itemList = new JSONArray();
jsonList.put("list", list);
out.println(jsonList);
*/
// 1-2. ArrayList와 itemList(JSONArray) 적용
JSONObject jsonList = new JSONObject();
JSONArray itemList = new JSONArray();
CompUsers reqUser = new CompUsers();
if ( req.getParameter("username") != null) {
reqUser.setUsername(req.getParameter("username"));
System.out.println("참" + reqUser.getUsername());
}
if ( req.getParameter("password") != null)
reqUser.setPassword(req.getParameter("password"));
if ( req.getParameter("enanbled") != null)
reqUser.setEnabled(Integer.valueOf( req.getParameter("enabled")) );
PrintWriter out = res.getWriter();
ArrayList<CompUsers> list = new ArrayList<CompUsers>();
list.add(new CompUsers("user","mole", 1));
list.add(new CompUsers("sumin", "pass", 0));
list.add(new CompUsers("smkim", "php", 1));
for (CompUsers user:list) {
JSONObject node = new JSONObject();
node.put("enabled", user.getEnabled());
node.put("password", user.getPassword());
node.put("username", user.getUsername());
itemList.put(node);
}
jsonList.put("list", itemList);
jsonList.put("command", "바둑이");
// DTO(또는 Model) 단독으로 입력불가
// jsonList.put("paramUser", reqUser);
ArrayList<CompUsers> list2 = new ArrayList<CompUsers>();
list2.add(reqUser);
//jsonList.put("paramUser", reqUser);
jsonList.put("paramUser", list2);
out.println(jsonList);
out.flush();
out.close();
}
}
파일명: ListJSONController.java
[첨부(Attachments)]
ListJSONController.zip14. Controller - /board/MultiUploadController.java
경로: /src/main/java/com/example/web/controller/board/MultiUploadController.java
package com.example.web.controller.board;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.example.web.controller.Controller;
import com.example.web.util.HttpUtil;
public class MultiUploadController implements Controller {
@Override
public void execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
HttpUtil.uploadFile(req, res);
/*
res.setCharacterEncoding("UTF-8");
res.setContentType("application/json");
@SuppressWarnings("unchecked")
List<Object> fileInfoList = (List<Object>) req.getAttribute("fileInfoList");
@SuppressWarnings("unchecked")
List<String> reqInfoList = (List<String>) req.getAttribute("reqInfoList");
// Model 구성해서 만들어도 무방
HttpUtil.getFileinfoParser(fileInfoList, null);
HttpUtil.getReqinfoParser(reqInfoList, null);
*/
res.setCharacterEncoding("UTF-8");
PrintWriter out = res.getWriter();
out.print("success");
out.flush();
out.close();
}
}
파일명: MultiUploadController.java
[첨부(Attachments)]
14. View 화면 구성하기 - index.jsp (index.do 파일 시작페이지 만들기)
Index.jsp 파일을 시작페이지로 만드는 작업이다.
경로: /src/main/webapp/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:forward page="index.do" />
파일명: index.jsp
[첨부(Attachments)]
FrontController.java 파일에 index.do를 command에서 식별할 수 있도록 해준다.
그리고 forward로 redirect처리하여 시작페이지로 보여지게 하는 원리이다.
-> 연계 작업: web.xml, FrontController.java 변경 작업을 해줘야 한다.
그림 21. index.jsp의 위치
15. View - /webapp/WEB-INF/views/index.jsp - 실제 시작 페이지
경로: /src/main/webapp/WEB-INF/views/index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
파일명: index.jsp
[첨부(Attachments)]
16. Controller(Servlet) - FrontController
경로: /src/main/java/com/example/web/controller/FrontController.java
package com.example.web.controller;
import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONObject;
import com.example.web.controller.board.InsertController;
import com.example.web.controller.board.ListJSONController;
import com.example.web.controller.board.MultiUploadController;
import com.example.web.util.HttpUtil;
public class FrontController extends HttpServlet {
private static final long serialVersionUID = 1L;
private String charset = null;
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
doAction(req, res, "GET");
}
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
doAction(req, res, "POST");
}
protected void doAction(HttpServletRequest req,
HttpServletResponse res,
String flag)
throws ServletException, IOException {
ServletConfig sc = this.getServletConfig();
charset = sc.getInitParameter("charset");
req.setAttribute("charset", charset);
req.setCharacterEncoding(charset);
res.setContentType("text/html; charset=" + charset);
String uri = req.getRequestURI();
String conPath = req.getContextPath();
String command = uri.substring(conPath.length());
Controller subController = null;
// GET 전송방식만
if(command.equals("/board/write.do") &&
flag.contentEquals("GET")) {
System.out.println("write - page");
System.out.println("----------------");
HttpUtil.forward(req, res, "/WEB-INF/views/board/insert.jsp");
}
// POST 전송방식만
else if(command.equals("/board/write_result.do") &&
flag.contentEquals("POST")){
System.out.println("write - result");
System.out.println("----------------");
subController = new InsertController();
subController.execute(req, res);
}
else if(command.equals("/board/list_json.do") &&
flag.contentEquals("POST")) {
System.out.println("write - result");
System.out.println("----------------");
subController = new ListJSONController();
subController.execute(req, res);
}
else if(command.equals("/board/upload.do") &&
flag.contentEquals("POST")) {
System.out.println("multipart/form - upload");
System.out.println("----------------");
subController = new MultiUploadController();
subController.execute(req, res);
}
else if (command.equals("/index.do")){
System.out.println("index.do");
System.out.println("----------------");
HttpUtil.forward(req, res, "/WEB-INF/views/index.jsp");
}
}
}
파일명: FrontController.java
[첨부(Attachments)]
17. View - /board/insert.jsp
경로: /src/main/webapp/WEB-INF/views/board/insert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
// 1. Ajax - Post 결과 출력
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
alert( "Data Loaded: " + data );
var content = data ;
$( "#result1" ).html( content );
});
// Attach a submit handler to the form
});
// 2. Ajax 버튼(수작업 쿼리 - 보내기)
$('#check').click(function(){
alert('특정 파라메터 보내기\n------------');
var query = {username:'한글', password:1234, enabled:1};
$.ajax({
url : "list_json.do",
type : "POST",
dataType : "json",
data : jQuery.param(query),
success : function(data) {
$.each(data, function(key, value) { // { logList:[{}], command:{} } 이런구조임
//alert('성공');
if (key == "list") {
for (var i = 0; i < value.length; i++) {
// alert(value[i].username);
}
} else if (key == "command") {
$('#result2').html(value);
}else if(key=="paramUser"){
// ArrayList로 받아서 처리함.
alert(value[0].username + "/" + value.username);
// 인식 여부 (ArrayList로 안 하면, 알수없는 객체로 인식함)
/*
for (var i = 0; i < value.length; i++) {
alert(i + "/" + value[i].username);
}
*/
} // end of if
});
},
error : function(msg) {
alert("error" + msg);
}
});
});
// 4. 다중 업로드 기능
$(function(){
$('#uploadBtn').on('click', function(){
uploadFile();
});
});
function uploadFile(){
var form = $('#uploadForm')[0];
var formData = new FormData(form);
$.ajax({
url : 'upload.do',
type : 'POST',
data : formData,
contentType : false,
processData : false,
success : function(data) {
alert('성공');
alert(data);
},
error : function(msg) {
alert("error" + msg);
}
}).done(function(data){
callback(data);
});
}
});
</script>
</head>
<body>
<h3>Ajax - 전송</h3>
<form action="write_result.do" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<div id="result1"></div>
<h3>JSON 전송 확인(jQuery 미적용)</h3>
<form action="list_json.do" method="POST">
<input type="text" name="keyword" placeholder="Search...">
<input type="submit" value="Search">
</form>
<h3>JSON 가져오기(jQuery 적용)</h3>
<label for="userid">USER ID</label>
<input type="text" id="userid">
<button id="check">버튼 누르기</button>
<p id="result2"></p>
<h3>Ajax 기반 - 다중 업로드</h3>
<form id="uploadForm" enctype="multipart/form-data">
<input type="hidden" name="token" value="2">
<input type="text" name="usrID" size="10">
<input type="file" name="uploadFile" multiple>
<button type="button" id="uploadBtn">Save</button>
</form>
</body>
</html>
파일명: insert.jsp
[첨부(Attachments)]
18. View - /board/result.jsp
경로: /src/main/webapp/WEB-INF/views/board/result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String text = (String)request.getParameter("s");
%>
<%= text %>
파일명: result.jsp
[첨부(Attachments)]
19. View - /board/uploadResult.jsp
경로: /src/main/webapp/WEB-INF/views/board/uploadResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>업로드 - 결과</title>
</head>
<body>
<h3>업로드 결과</h3>
<%
//Object name = request.getAttribute("usrID");
//Object login = request.getAttribute("login");
Object obj = request.getAttribute("reqMap");
Map<String, Object> map = null;
if(obj != null){
map = (HashMap<String, Object>)obj;
}
%>
<table style="width:700px;border:1px solid #e2e2e2;">
<tr>
<td style="width:20%;">
<%
out.println("name : " + map.get("usrID") + "<br />");
%>
</td>
<td style="width:20%;border-left:1px solid #e2e2e2;">
<%
out.println("login : " + map.get("usrPasswd") + "<br />");
%>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
파일명: uploadResult.jsp
[첨부(Attachments)]
* 맺음글(Conclusion)
jQuery, Ajax, 멀티 파일 업로드, POST 전송, JSON 구성에 대해서 살펴보았다.
* 참고 자료(References)
1. jsp json 데이터 받기, https://happy-hs.tistory.com/16, Accessed by 2020-10-03, Last Modified 2018-09-20.
2. [Java] JSP - JSON 데이터 주고 받기 - JSONParser, https://kiwinam.com/posts/11/jsp-json-parser/, Accessed by 2020-10-03, Last Modified 2017-05-03.
3. jQuery.post() | jQuery API Documentation, https://api.jquery.com/jquery.post/, Accessed by 2020-10-03, Last Modified .
4. [Servlet] JSON 문자열로 응답하기, https://noritersand.github.io/servlet/servlet-json-%EB%AC%B8%EC%9E%90%EC%97%B4%EB%A1%9C-%EC%9D%91%EB%8B%B5%ED%95%98%EA%B8%B0/, Accessed by 2020-10-03, Last Modified 2014-01-14.
5. Java File Upload Example with Servlet, JSP and Apache Commons FileUpload, https://www.codejava.net/java-ee/servlet/apache-commons-fileupload-example-with-servlet-and-jsp, Accessed by 2020-10-03, Last Modified 2019-06-25.
'소프트웨어(SW) > JSP' 카테고리의 다른 글
| [JSP] 27. Java 스타일의 트랜젝션 구현하기(은행 계좌) (155) | 2020.10.09 |
|---|---|
| [JSP] 26. JSP/Servlet - InvocationHandler와 Proxy를 이용하여 관점 구현하기 (157) | 2020.10.04 |
| [JSP] 24. jQuery와 Ajax 멀티 파일 업로드(개선), POST전송, JSON - 구성하기(1) (119) | 2020.10.03 |
| [JSP] 23(번외). JSP/Servlet - MVC2 index.do 시작페이지 만들기 (FrontController, Command패턴) (114) | 2020.10.03 |
| [JSP] 22. JSP/Servlet MVC2 - jQuery기반의 Ajax POST 전송 및 MVC패턴 Action 식별자 (118) | 2020.10.02 |