https://shxrecord.tistory.com/166

 

[ERROR]Ajax 사용 및 json 데이터 한글 깨짐 현상

Ajax를 이용해 json 데이터를 파싱할 때 간혹 한글이 깨지는 현상을 겪곤했습니다. 그 때마다 구글링해서 해결했었는데 이번 기회에 정리를 해놓으려고 합니다. 문제가 발생한 구간은 Ajax로 서버 �

shxrecord.tistory.com

 

https://zzznara2.tistory.com/94

 

[jQuery] ajax로 값을 가져올 때 UTF-8 환경에서 한글깨짐 해결하기 - 자바(java)

요즘은 한글 뿐만이 아니라 국제화를 위해 다국어를 지원하기 위해 UTF-8 인코딩 상태에서 개발을 하는 경우가 많죠. 저도 어느 프로젝트를 가든 UTF-8로 작업을 하게 되는데요. 예전엔 iframe으로 ��

zzznara2.tistory.com


 

컨트롤러에

	    request.setCharacterEncoding("utf8");
	    response.setCharacterEncoding("utf8");

추가

package lv.backend.controller;

import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
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.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;

import lv.backend.dao.FileDAO;
import lv.backend.dao.ProfileDAO;
import lv.backend.dto.FileDTO;
import lv.backend.dto.ProfileDTO;


@WebServlet("*.profile")
public class ProfileController extends HttpServlet {


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	    request.setCharacterEncoding("utf8");
	    response.setCharacterEncoding("utf8");
	    
	    
		String contextPath = request.getContextPath();
		String requestURI = request.getRequestURI();
		String cmd = requestURI.substring(contextPath.length());
		ProfileDAO dao = new ProfileDAO();
		FileDAO fdao = new FileDAO();
		try {
			
			if(cmd.contentEquals("/write.profile")) {
//-------------- 나중에 병합시 lawyerDTO 변호사 회원가입 dto 이름 확인할것!
//				LawyerDTO dto = (LawyerDTO)request.getSession().getAttribute("loginInfo");
				// request getSession으로 꺼낼 수 있나? 꺼낼 이름이 "loginInfo"인가?
				
				// profileWrite.jsp의 입력값 + Session에 담긴 lawyerDTO
//				String name = dto.getName(); 
//				String title = request.getParameter("title");
//				String phone = dto.getPhone();
//				String specialty = request.getParameter("specialty");
//				String office_name = dto.getOffice_name();
//				String office_phone = dto.getOffice_phone();
//				String test = dto.getTest();
//				String education = request.getParameter("education");
//				String id = dto.getId();
				
				System.out.println("write.profile 도착");
				
				String name = "이름"; 
				String title = request.getParameter("title");
				String phone = "번호";
				String specialty = request.getParameter("specialty");
				String office_name = "사무소명";
				String office_phone = "사무소번호";
				String test = "출신시험";
				String education = request.getParameter("education");
				String id = "아이디";
				
				System.out.println("title : " + title);
				System.out.println("specialty : " + specialty);
				System.out.println("education : " + education);
				//여기가 문제
				int result = dao.insertProfile(new ProfileDTO(name,title,phone,specialty,office_name,office_phone,test,education,id));
				
				
				
//--------------프로필 쓰기 완료후 다시 프로필 리스트 이동 (컨트롤러 통해서 데이터 불러오고 )
//				int cpage = 1; // 바로 게시판으로 들어갈 경우
//				try{
//					cpage = Integer.parseInt(request.getParameter("cpage")); //현재 페이지 받아오기
//				}catch(Exception e) {}
//				System.out.println("현재 페이지 : " + cpage); //현재 페이지 확인 코드
				
//				List<ProfileDTO> list = dao.selectByPageNo(cpage); // 전체 목록이 아닌 일부만 불러오기
//				String navi = dao.getpageNavi(cpage);	// 에러? 

//				request.setAttribute("list", list);
//				request.setAttribute("navi", navi);
//				RequestDispatcher rd = request.getRequestDispatcher("profileList.jsp");
//				rd.forward(request, response);
//----------------		
				
//-------------- 파일 업로드
//				String uploadPath = request.getServletContext().getRealPath("upload");
//				File uploadPathF = new File(uploadPath);
//				if(!uploadPathF.exists()) {
//					uploadPathF.mkdir();
//				}
//				MultipartRequest multi = 
//						new MultipartRequest(
//								request,
//								uploadPath,
//								1024*1024*10,
//								"utf8",
//								new DefaultFileRenamePolicy());
//				String sysName = multi.getFilesystemName("file");
//				String oriName = multi.getOriginalFileName("file");	
//	
//				
//				String name = "테스트용 이름"; 
//				String title = request.getParameter("title");
//				String phone = "테스트용 번호";
//				String specialty = request.getParameter("specialty");
//				String office_name = "테스트용 사무소명";
//				String office_phone = "테스트용 사무소번호";
//				String test = "테스트용 출신시험";
//				String education = request.getParameter("education");
//				String id = "테스트용 아이디";
//				
//
//
//				
//				dao.insertProfile(new ProfileDTO(name,title,phone,specialty,office_name,office_phone,test,education,id));
//				fdao.insert(sysName, oriName);
//				RequestDispatcher rd = request.getRequestDispatcher("writeComplete.jsp");
//				rd.forward(request, response);
				
		
			}else if(cmd.contentEquals("/toProfileList.profile")) {
	
//				int cpage = 1; // 바로 게시판으로 들어갈 경우
//				try{
//					cpage = Integer.parseInt(request.getParameter("cpage")); //현재 페이지 받아오기
//				}catch(Exception e) {}
//				System.out.println("현재 페이지 : " + cpage); //현재 페이지 확인 코드
//				
//				List<ProfileDTO> list = dao.selectByPageNo(cpage); // 전체 목록이 아닌 일부만 불러오기
//				String navi = dao.getpageNavi(cpage);	// 에러? 
//				
//				request.setAttribute("list", list);
//				request.setAttribute("navi", navi);
//				RequestDispatcher rd = request.getRequestDispatcher("profileList.jsp");
//				rd.forward(request, response);
				
				response.sendRedirect("profileList.jsp");

				
			}else if(cmd.contentEquals("/profileListAjax.profile")){
				
				int cpage = Integer.parseInt(request.getParameter("cpage"));
				try {
					List<ProfileDTO> list = dao.selectByPageNo(cpage);
					//클라이언트는 JSON으로 받는게 좋음 : List<BoardDTO>를 JSON으로
					String respArr = new Gson().toJson(list);
					response.getWriter().append(respArr);
				
					//프로필 수정 / 삭제 기능 미구현
				} catch (Exception e) {
					e.printStackTrace(); //에러나면 어쩌피 fail로 가기 때문에 여기서 따로 에러페이지 보낼 필요없음
					response.sendError(500); //에러메세지를 응답으로 보내겠
				}
				
			}else if(cmd.contentEquals("/toProfile.profile")) {
//				System.out.println("toProfile.profile 컨트롤러 실행 : "+request.getQueryString().substring(4) );
//				System.out.println(request.getParameter("seq"));
				
				int seq = Integer.parseInt(request.getParameter("seq"));
//				System.out.println("받아온 시퀀스 확인용 : "+seq); // 받아온 시퀀스 확인용
				ProfileDTO dto = dao.selectBySeq(seq);
//				System.out.println(dto );
				request.setAttribute("dto", dto);

//				List<FileDTO> fileList = dao.selectFileBySeq(seq);
//				request.setAttribute("fileList", fileList);
				
				RequestDispatcher rd = request.getRequestDispatcher("profile.jsp");
				rd.forward(request, response);
				
			}else if(cmd.contentEquals("/delete.profile")) {
				
				int seq = Integer.parseInt(request.getParameter("seq"));
				dao.deleteBySeq(seq);
				response.sendRedirect("toProfileList.profile");
				
			}else if(cmd.contentEquals("/toProfileModify.profile")) {
				// 프로필에서 수정하기 버튼을 누르면 
				// 해당 글seq로 프로필dto를 새로 찾아서
				// 수정하기 페이지로 이동
				int seq = Integer.parseInt(request.getParameter("seq"));
				ProfileDTO dto = dao.selectBySeq(seq);
				request.setAttribute("dto", dto);
				RequestDispatcher rd = request.getRequestDispatcher("profileModify.jsp");
				rd.forward(request, response);
				
			}else if(cmd.contentEquals("/modify.profile")) {
				
				int seq = Integer.parseInt(request.getParameter("seq"));
				// 변호사 테이블에서 불러오기?
				// 아니면 여기서도 수정? 외래키는?
				String name = "이름"; 
				String title = request.getParameter("title");
				String phone = "번호";
				String specialty = request.getParameter("specialty");
				String office_name = "사무소명";
				String office_phone = "사무소번호";
				String test = "출신시험";
				String education = request.getParameter("education");
				String id = "아이디";
				
				System.out.println("시퀀스만 get방식? :"+seq);
				System.out.println("title : " + title);
				System.out.println("specialty : " + specialty);
				System.out.println("education : " + education);
				
				//여기가 문제
				int result = dao.updateBySeq(new ProfileDTO(seq,name,title,phone,specialty,office_name,office_phone,test,education,id));
				response.sendRedirect("toProfile.profile?seq="+seq);
				
			}
			
		}catch(Exception e) {
			
		}
		
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

ajax 한글 ??로 출력되는 문제 해결

 

(왜 jsp는 된거지?)

 

'디지털 컨버전스 > AJAX' 카테고리의 다른 글

[AJAX] 파파고 연동  (0) 2020.05.11
[AJAX] HTTP 상태 코드 / Array list 데이터 가져오기 / 무한스크롤  (0) 2020.05.11
[AJAX] 아이디 중복체크  (0) 2020.05.11
[AJAX]  (0) 2020.05.11

 

번역 버튼을 ajax로 

 

(좋아요도 ajax)

		$("#exam06").on("click",function(){
			$.ajax({
				url:"exam06.ajax"
			}).done(function(resp){
				console.log(resp);
			});
		})
else if(cmd.contentEquals("/exam06.ajax")){
			
			int cpage = Integer.parseInt(request.getParameter("cpage"));
			try {
				dao.selectByPageNo(cpage);
			} catch (Exception e) {
				e.printStackTrace(); //에러나면 어쩌피 fail로 가기 때문에 여기서 따로 에러페이지 보낼 필요없음
				response.sendError(500); //에러메세지를 응답으로 보내겠
			}
		}

https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

 

HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 아래는 HTTP(하이퍼텍스트 전송 프로토콜) 응답 상태 코드의 목록이다. IANA가 현재 공식 HTTP 상태 코드 레지스트리를 관리하고 있다. 모든 HTTP 응답 코드는 5개의 클래스(분류)로 구분된다. 상태 코드의 첫 번째 숫자는 응답의 클래스를 정의한다. 마지막 두 자리는 클래스나 분류 역할을 하지 않는다. 첫자리에 대한 5가지 값들은 다음과 같다: 1xx (정보): 요청을 받았으며 프로

ko.wikipedia.org


else if(cmd.contentEquals("/exam06.ajax")){
			
			int cpage = Integer.parseInt(request.getParameter("cpage"));
			try {
				List<BoardDTO> list = dao.selectByPageNo(cpage);
				System.out.println(list.size());
				response.getWriter().append("works!");
			} catch (Exception e) {
				e.printStackTrace(); //에러나면 어쩌피 fail로 가기 때문에 여기서 따로 에러페이지 보낼 필요없음
				response.sendError(500); //에러메세지를 응답으로 보내겠
			}
		}
		var pageNo = 1;
		$("#exam06").on("click",function(){
			$.ajax({
				url:"exam06.ajax",
				data : {cpage:pageNo++}
			}).done(function(resp){
				console.log(resp);
			});
		})


//클라이언트는 JSON으로 받는게 좋음 : List<BoardDTO>를 JSON으로

else if(cmd.contentEquals("/exam06.ajax")){
			
			int cpage = Integer.parseInt(request.getParameter("cpage"));
			try {
				List<BoardDTO> list = dao.selectByPageNo(cpage);
				//클라이언트는 JSON으로 받는게 좋음 : List<BoardDTO>를 JSON으로
				String respArr = new Gson().toJson(list);
				response.getWriter().append(respArr);
				
//				JsonArray respArr = new JsonArray();
//				for (BoardDTO dto:list) {
//					JsonObject obj = new JsonObject();
//					obj.addProperty("seq",dto.getSeq());
//					obj.addProperty("seq",dto.getTitle());
//					obj.addProperty("seq",dto.getContents());
//					obj.addProperty("seq",dto.getWriter());
//					obj.addProperty("seq",dto.getWrite_date());
//					obj.addProperty("seq",dto.getView_count());
//					respArr.add(obj);
//				};
				
			} catch (Exception e) {
				e.printStackTrace(); //에러나면 어쩌피 fail로 가기 때문에 여기서 따로 에러페이지 보낼 필요없음
				response.sendError(500); //에러메세지를 응답으로 보내겠
			}
		}
		var pageNo = 1;

		$("#exam06").on("click", function() {
			$.ajax({
				url : "exam06.ajax",
				data : {cpage:pageNo++},
				dataType : "json"
			}).done(function(resp) {
				console.log(resp);
				for(var i = 0; i < resp.length; i++){	
				$("#board").append(resp[i].title+" : "+resp[i].writer +"<br>");
				}
			});
		})

		$("#exam06").on("click", function() {
			$.ajax({
				url : "exam06.ajax",
				data : {
					cpage : pageNo++
				},
				dataType : "json"
			}).done(function(resp) {
				console.log(resp);
				for (var i = 0; i < resp.length; i++) {

					var line = $("<div>");
					line.addClass("article")
					line.append(resp[i].title)
					$("#board").append(line);
				}
			});
		})
<style>
* {
	box-sizing: border-box;
}

#board {
	width: 600px;
	height: 300px;
	margin: auto;
	border: 1px solid black;
	overflow-y: auto;
}
.article{

	border: 1px solid black;
	float : left;
	height: 150px;
	line-height:150px;
	width:50%;
	text-align:center;
	
}
</style>


var pageNo = 1;

		$("#exam06").on("click", function() {
			$.ajax({
				url : "exam06.ajax",
				data : {
					cpage : pageNo++
				},
				dataType : "json"
			}).done(function(resp) {
				console.log(resp);
				for (var i = 0; i < resp.length; i++) {

					var line = $("<div>");
					line.addClass("article")
					
					var title = $("<div>");
					title.addClass("title")
					title.append(resp[i].title)
					
					var writer = $("<div>");
					writer.addClass("writer")
					writer.append(resp[i].writer)
					
					line.append(title);
					line.append(writer);
					
					$("#board").append(line);
				}
			});
         })
<style>
* {
	box-sizing: border-box;
}

#board {
	width: 600px;
	height: 300px;
	margin: auto;
	border: 1px solid black;
	overflow-y: auto;
}
.article{
	border: 1px solid black;
	float : left;
	height: 150px;
	line-height:150px;
	width:25%;
	text-align:center;
}
.title{
	border: 1px solid black;
	float : left;
	height: 100px;
	line-height:100px;
	width:100%;
	text-align:center;
}
.writer{
	border: 1px solid black;
	float : left;
	height: 50px;
	line-height:50px;
	width:100%;
	text-align:center;
}
</style>

스트링 하나에 모든 태그 담아서 실행하는 것보다

나눠서 올리는게 유지 관리 측면에서 유리하다.

 


무한 휠 / 무한 스크롤

		//스크롤 관련 이벤트는 제이쿼리말고 자바스크립트로 (버그)
		$("#board").on("scroll",function(){
			var board = document.getElementById("board");
			if(board.offsetHeight + board.scrollTop > board.scrollHeight){
				loadData();
			}
		})
		
		function loadData(){
			$.ajax({
				url : "exam06.ajax",
				data : {
					cpage : pageNo++
				},
				dataType : "json"
			}).done(function(resp) {
				console.log(resp);
				for (var i = 0; i < resp.length; i++) {

					var line = $("<div>");
					line.addClass("article");
					
					var title = $("<div>");
					title.addClass("title");
					title.append(resp[i].title);
					
					var writer = $("<div>");
					writer.addClass("writer");
					writer.append(resp[i].writer);
					
					line.append(title);
					line.append(writer);
					
					$("#board").append(line);
				}
			});
		}

'디지털 컨버전스 > AJAX' 카테고리의 다른 글

[문제] UTF-8에서 ajax를 사용 시 한글깨짐 현상(??)이 발생  (0) 2020.05.15
[AJAX] 파파고 연동  (0) 2020.05.11
[AJAX] 아이디 중복체크  (0) 2020.05.11
[AJAX]  (0) 2020.05.11

아이디 중복체크 팝업창으로 만들지 말고 AJAX로 중복 검사

 

(onkeyup 멋지긴 하지만 트래픽이 과도해지는 문제가 생김, 실제 프로젝트 시연시 오버헤드 주의

-> onfocusout)

 

            $(function(){
            	$('#duplCheck').on("click",function(){
            		window.open("duplcheck.mem?id="+$("#id").val(),"","width=400,height=300");
            		
            	})
            	
            	$('#back').on("click",function(){
        			location.href = "indexview.mem"
            	})
            	
            })

AJAX

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("*.ajax")
public class AJAXController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String requestURI = request.getRequestURI();
		String ctxPath = request.getContextPath();
		
		String cmd = requestURI.substring(ctxPath.length());
		System.out.println(cmd);
		if(cmd.contentEquals("/exam01.ajax")) {
			
		}
	
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

$는 객체 : $()뿐 아니라 $. 찍을 수 있다

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
	<button id="exam01">Exam01</button>
	<script>
		$("#exam01").on("click",function(){
			$.ajax({
				url:"exam01.ajax"
			})
		})
	</script>
</body>
</html>

$.ajax(자바스크립트객체)

[] 배열

{} 객체

 

키값을 url로 쓰지 않으면 ajax 쓸 이유 없음

 

AJAX로 리퀘스트 보내기


클라이언트가 서버에 데이터를 보내는 방법

1. submit

2. url에 get방식을 흉내내기

-> 페이지가 전환되는 방식

 

 AJAX : 페이지 전환없이 데이터를 서버와 주고 받는 기술

(Asynchronous JavaScript And XML)

: 비동기 매커니즘을 구현할 때 쓰이는 기술

(과거에는 XML 현재는 JSON)

 

비동기화 : 서로 응답을 기다리지 않고 자기 할일을 하다가 응답이 오면 그때 응답 처리

 


AJAX WITH PARAMETER

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
	<button id="exam01">Exam01</button>
	
	<button id="exam02">Exam02</button>
	
	
	<script>
	
		$("#exam01").on("click",function(){
			$.ajax({url:"exam01.ajax"})
		})
	
		$("#exam02").on("click",function(){
			$.ajax({
				url:"exam02.ajax",
				type:"get",
				data:{
					name:"jack",
					msg:"Hello AJAX"
				}
			})
		})
	</script>
</body>
</html>
package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("*.ajax")
public class AJAXController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String requestURI = request.getRequestURI();
		String ctxPath = request.getContextPath();
		
		String cmd = requestURI.substring(ctxPath.length());
		System.out.println(cmd);
		if(cmd.contentEquals("/exam01.ajax")) {
			System.out.println("기본 AJAX");
		}
		else if(cmd.contentEquals("/exam02.ajax")){
			System.out.println("AJAX WITH PARAMETER");
			String name = request.getParameter("name");
			String msg = request.getParameter("msg");
			System.out.println(name +" : "+ msg);
		}
	
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

네트워크 탭은 우리가 주고 받는 데이터가 어떤값인지 모니터링 한 기록을 볼 수 있다.

Query String Parameters 가 존재하면 일단 데이터가 보내진 것

 

( 자동화 프로그램 제작시 셀레니움과 네트워크 패킷 주고 받는 것을 연동해서 )

 


POST 방식으로 변경

 


체이닝 기법 (빌더 기법)

 

리턴된값 .done(function(){})

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
	<button id="exam01">Exam01</button>
	
	<button id="exam02">Exam02</button>
	
	<button id="exam03">Exam03</button>
	
	<script>
	
		$("#exam01").on("click",function(){
			$.ajax({url:"exam01.ajax"})
		})
	
		$("#exam02").on("click",function(){
			$.ajax({
				url:"exam02.ajax",
				type:"post",
				data:{
					name:"jack",
					msg:"Hello AJAX"
				}
			})
		})
		
		$("#exam03").on("click",function(){
			$.ajax({
				url:"exam03.ajax"
			}).done(function(resp){
				console.log(resp);
			})
		})
		
	</script>
</body>
</html>
package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("*.ajax")
public class AJAXController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String requestURI = request.getRequestURI();
		String ctxPath = request.getContextPath();
		
		String cmd = requestURI.substring(ctxPath.length());
		System.out.println(cmd);
		if(cmd.contentEquals("/exam01.ajax")) {
			System.out.println("기본 AJAX");
		}else if(cmd.contentEquals("/exam02.ajax")){
			System.out.println("AJAX WITH PARAMETER");
			String name = request.getParameter("name");
			String msg = request.getParameter("msg");
			System.out.println(name +" : "+ msg);
		}else if(cmd.contentEquals("/exam03.ajax")){
			
			response.getWriter().append("Hello AJAX Done");
			
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

resp에 담는 값은 일단 String 그 후에 필요에 따라 변화해서 사용

 


프론트 컨트롤러와 JSP가

리퀘스트 리스폰스 공유

 

forward.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
	forward forward forward
</body>
</html>

 

 

AJAXController.java

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("*.ajax")
public class AJAXController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String requestURI = request.getRequestURI();
		String ctxPath = request.getContextPath();
		
		String cmd = requestURI.substring(ctxPath.length());
		System.out.println(cmd);
		if(cmd.contentEquals("/exam01.ajax")) {
			System.out.println("기본 AJAX");
		}else if(cmd.contentEquals("/exam02.ajax")){
			System.out.println("AJAX WITH PARAMETER");
			String name = request.getParameter("name");
			String msg = request.getParameter("msg");
			System.out.println(name +" : "+ msg);
		}else if(cmd.contentEquals("/exam03.ajax")){
			
			request.
			getRequestDispatcher("forward.jsp").
			forward(request, response);
			// ajax에 대한 response는 뭘 해도 String 값이다
            
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

 

ajax에 대한 response는 뭘 해도 String 값이다


실패했을 경우 동작

 

예외 발생

.fail

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
	<button id="exam01">Exam01</button>
	<button id="exam02">Exam02</button>
	<button id="exam03">Exam03</button>
	
	<button id="exam04">Exam04</button>
	
	<script>
	
		$("#exam01").on("click",function(){
			$.ajax({url:"exam01.ajax"})
		})
		$("#exam02").on("click",function(){
			$.ajax({
				url:"exam02.ajax",
				type:"post",
				data:{
					name:"jack",
					msg:"Hello AJAX"
				}
			})
		})
		$("#exam03").on("click",function(){
			$.ajax({
				url:"exam03.ajax"
			}).done(function(resp){
				console.log(resp);
			})
		})
		
		$("#exam04").on("click",function(){
			$.ajax({
				url:"exam04.ajax"
			}).done(function(){
				console.log("성공!");
			}).fail(function(error1,error2){
				console.log(error1);
				console.log(error2);
			})
		})
		
	</script>
</body>
</html>
package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("*.ajax")
public class AJAXController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String requestURI = request.getRequestURI();
		String ctxPath = request.getContextPath();
		
		String cmd = requestURI.substring(ctxPath.length());
		System.out.println(cmd);
		if(cmd.contentEquals("/exam01.ajax")) {
			System.out.println("기본 AJAX");
		}else if(cmd.contentEquals("/exam02.ajax")){
			System.out.println("AJAX WITH PARAMETER");
			String name = request.getParameter("name");
			String msg = request.getParameter("msg");
			System.out.println(name +" : "+ msg);
		}else if(cmd.contentEquals("/exam03.ajax")){
//			response.getWriter().append("Hello AJAX Done");
			request.
			getRequestDispatcher("forward.jsp").
			forward(request, response);
			// ajax에 대한 response는 뭘 해도 String 값이다
		}else if(cmd.contentEquals("/exam04.ajax")){

			Integer.parseInt("A");
			
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

 

 

성공했을 때의 동작과 실패했을 때의 동작을 미리 정해 놓을 수 있음

 


복잡한 데이터를 받을 경우

스트링을 제이슨으로 변환해서 사용해야 함

 

package kh.backend.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("*.ajax")
public class AJAXController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String requestURI = request.getRequestURI();
		String ctxPath = request.getContextPath();
		
		String cmd = requestURI.substring(ctxPath.length());
		System.out.println(cmd);
		if(cmd.contentEquals("/exam01.ajax")) {
			System.out.println("기본 AJAX");
		}else if(cmd.contentEquals("/exam02.ajax")){
			System.out.println("AJAX WITH PARAMETER");
			String name = request.getParameter("name");
			String msg = request.getParameter("msg");
			System.out.println(name +" : "+ msg);
		}else if(cmd.contentEquals("/exam03.ajax")){
//			response.getWriter().append("Hello AJAX Done");
			request.
			getRequestDispatcher("forward.jsp").
			forward(request, response);
			// ajax에 대한 response는 뭘 해도 String 값이다
		}else if(cmd.contentEquals("/exam04.ajax")){
			Integer.parseInt("A");
		}else if(cmd.contentEquals("/exam05.ajax")){
			
			response.getWriter().append("{name: 'Tom', msg:'Ajax Practice'}");
			
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}
		$("#exam05").on("click",function(){
			$.ajax({
				url:"exam05.ajax"
			}).done(function(resp){
				console.log(resp);
				console.log(resp.name);
				console.log(resp.msg);
			})
		})

자바스크립트 객체에 . 찍으면 내부 값 출력 가능

객체 형태로 받아졌지만 내용을 꺼낼수 없는 이유

-> 객체가 아니라 스트링으로 받아짐

-> 스트링을 제이슨으로 변환해서 사용해야 함


JSON.parse

		$("#exam05").on("click",function(){
			$.ajax({
				url:"exam05.ajax"
			}).done(function(resp){
				//JSON.parse : String to JSON
				console.log(resp);
				resp = JSON.parse(resp);
				console.log(resp.name);
				console.log(resp.msg);
			})
		})

 

GSON 라이브러리 사용

gson-2.8.6.jar
0.23MB

package kh.backend.controller;

import java.io.IOException;

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.JsonObject;


@WebServlet("*.ajax")
public class AJAXController extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String requestURI = request.getRequestURI();
		String ctxPath = request.getContextPath();
		
		String cmd = requestURI.substring(ctxPath.length());
		System.out.println(cmd);
		if(cmd.contentEquals("/exam01.ajax")) {
			System.out.println("기본 AJAX");
		}else if(cmd.contentEquals("/exam02.ajax")){
			System.out.println("AJAX WITH PARAMETER");
			String name = request.getParameter("name");
			String msg = request.getParameter("msg");
			System.out.println(name +" : "+ msg);
		}else if(cmd.contentEquals("/exam03.ajax")){
//			response.getWriter().append("Hello AJAX Done");
			request.
			getRequestDispatcher("forward.jsp").
			forward(request, response);
			// ajax에 대한 response는 뭘 해도 String 값이다
		}else if(cmd.contentEquals("/exam04.ajax")){
			Integer.parseInt("A");
		}else if(cmd.contentEquals("/exam05.ajax")){
			
			JsonObject respObj = new JsonObject();
			respObj.addProperty("name", "tom");
			respObj.addProperty("msg", "Ajax Practice");
			
			response.getWriter().append(respObj.toString());
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}


respObj 를 2개 보낼 때

else if(cmd.contentEquals("/exam05.ajax")){
			
			JsonObject respObj1 = new JsonObject();
			respObj1.addProperty("name", "tom");
			respObj1.addProperty("msg", "Ajax Practice");
			
			JsonObject respObj2= new JsonObject();
			respObj2.addProperty("name", "mike");
			respObj2.addProperty("msg", "Fool tom");
		
			
			response.getWriter().append(respObj1.toString());
			response.getWriter().append(respObj2.toString());
		}

-> append도 2번?

-> 중괄호 2번 나오는 JSON은 없음 -> 분석 불가

 

-> 올바른 방법 [{ },{ }] : JSON Array

else if(cmd.contentEquals("/exam05.ajax")){
			
			JsonObject respObj1 = new JsonObject();
			respObj1.addProperty("name", "tom");
			respObj1.addProperty("msg", "Ajax Practice");
			
			JsonObject respObj2= new JsonObject();
			respObj2.addProperty("name", "mike");
			respObj2.addProperty("msg", "Fool tom");
		
			JsonArray respArr = new JsonArray();
			respArr.add(respObj1);
			respArr.add(respObj2);
			response.getWriter().append(respArr.toString());
		}

 

 

 

jsp 출력부분도 배열에 맞게 변경해야 함

for 문으로 배열 출력

		$("#exam05").on("click",function(){
			$.ajax({
				url:"exam05.ajax"
			}).done(function(resp){
				//JSON.parse : String to JSON
				console.log(resp);
				resp = JSON.parse(resp);
				for(var i = 0 ; i< resp.length; i++){
				console.log(resp[i].name +" : "+resp[i].msg);
				}
			})
		})


dataType:"json"

 

스트링으로 받아

resp = JSON.parse(resp);

하던가

 

 

바로 json으로 받을 수 있음

		$("#exam05").on("click",function(){
			$.ajax({
				url:"exam05.ajax",
				dataType:"json"
			}).done(function(resp){
				//JSON.parse : String to JSON
				console.log(resp);
				for(var i = 0 ; i< resp.length; i++){
				console.log(resp[i].name +" : "+resp[i].msg);
				}
				
				//parse 대신
			})
		})

jsp를 응답에 담아서 보냈을 경우

 

일반적으로 페이지 상단에서 인코딩이 되지만

 

ajax로 응답을 보낼때에는 스트링형으로가서 한글이 깨짐

별도로 response 인코딩 해줘서 보내야함

			response.setCharacterEncoding("utf8");
else if(cmd.contentEquals("/exam05.ajax")){
			
			response.setCharacterEncoding("utf8");
			
			JsonObject respObj1 = new JsonObject();
			respObj1.addProperty("name", "tom");
			respObj1.addProperty("msg", "Ajax Practice");
			
			JsonObject respObj2= new JsonObject();
			respObj2.addProperty("name", "mike");
			respObj2.addProperty("msg", "Fool tom");
		
			JsonArray respArr = new JsonArray();
			respArr.add(respObj1);
			respArr.add(respObj2);
			response.getWriter().append(respArr.toString());
		}

 

+ Recent posts