dev.Log

ajax - Gson 활용 본문

<FRONTEND>

ajax - Gson 활용

초코푸딩 2020. 7. 9. 11:19 
package com.khjk.controller;

import java.io.IOException;
import java.sql.Date;
import java.util.ArrayList;

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.google.gson.JsonObject;
import com.khjk.model.PostVO;

/**
 * Servlet implementation class ajaxtest
 */
@WebServlet("/ajax-test")
public class ajaxtest extends HttpServlet {
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");	
		request.setAttribute("msg", "메시지 값입니다");
		RequestDispatcher rd = request.getRequestDispatcher("ajax.jsp");
		rd.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		  //요청값
		  String id = request.getParameter("id"); 
		  System.out.println("ajax 요청값" + id);
		  
		  //응답값
		  Gson gson = new Gson();
		  JsonObject json = new JsonObject();
		  
		  //값 하나씩 넣어주기
		  String name ="관리자";
		  String role ="user";
		  json.addProperty("name", name);
		  json.addProperty("role",role);
		  
		  //1.VO객체와 2.VO객체를 담은 ArrayList보내기
		  PostVO post1 = new PostVO(1,"gywjd",Date.valueOf("2020-07-01"),"this is content");
		  PostVO post2 = new PostVO(2,"hello",Date.valueOf("2020-11-12"),"this is also content");
		  ArrayList<PostVO> posts = new ArrayList<>();
		  posts.add(post1);
		  posts.add(post2);
		  
		  response.setCharacterEncoding("UTF-8");
		  //response.getWriter().write(gson.toJson(json));
		 // response.getWriter().write(gson.toJson(post1));
		  response.getWriter().write(gson.toJson(posts));

	}

}

<%@ 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(function() {	
	$("#login").on("click", function(){
		$.ajax({
			url : "ajax-test",     //요청URL
			type : "post", 			//method방식(get, post)
			data : {id:"아이디로호출"},	//서버(url에 보낼 데이터)
			dataType: "json",		//반환받을 데이터
			success: function(data){ //ajax 요청 성공시 실행
				console.log(data);
				//$("#data").html("<h1>name :" + data.name + "</h1>");
			},
			error: function(request,status,error){ //ajax 요청 실패시 실행
				console.log("status : " + request.status+", error :" + error)
			}
		});
	});
});

function ajaxMethod(){
	$.ajax({
		url : "ajax-test",     //요청URL
		type : "post", 			//method방식(get, post)
		data : {id:"admin"},	//서버(url에 보낼 데이터)
		dataType: "json",		//반환받을 데이터
		success: function(data){ //ajax 요청 성공시 실행
			console.log(data);
		},
		error: function(request,status,error){ //ajax 요청 실패시 실행
			console.log("status : " + request.status+", error :" + error)
		}
	});
}
</script>
<body>
	<input type="button" value="ajax 요청" onclick="ajaxMethod()">
	<input type="button" id="login" value="id로 ajax 요청">
	<div>${msg}</div>
	<div id="data"></div>
</body>
</html>

'<FRONTEND>' 카테고리의 다른 글

GNB, LNB, SNB, FNB  (1) 2020.07.11
리액트 면접질문  (0) 2020.07.11
CORS  (0) 2020.07.07
Markdown  (0) 2020.07.07
검색어 추천 기능 ajax로 구현해보기  (0) 2020.07.06
'<FRONTEND>' Related Articles more
Comments