온 코딩

[jQuery - Ajax] Gson을 통해 전달되는 값의 형태 확인하기 / 파일첨부 본문

복습 ARCHIVE/java script

[jQuery - Ajax] Gson을 통해 전달되는 값의 형태 확인하기 / 파일첨부

SummerON 2021. 6. 8. 14:15

Gson 사용 시 값의 전달 형태 확인 

<%@ page language="java" contentType="application/json; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson"%>
<%@ page import="com.freeflux.dto.Member"%>
<%@ page import="java.util.*"%>
<%
	// Member 인스턴스화(객체)를 List에 담아, Gson를 이용하여 json 포맷방식 String타입으로 반환

	Gson g = new Gson();
	Member vo = new Member();
	vo.setAddress("서울");
	vo.setAge("20");
	vo.setName("가나다");

	out.println(g.toJson(vo));
	/* 	{
		name: "가나다",
		age: "20",
		address: "서울"
		} */

	// com.freeflux.dto => Member.java   => List 
	List<Member> list = new ArrayList<Member>();

	vo = new Member();
	vo.setAddress("인천");
	vo.setAge("21");
	vo.setName("나다라");
	list.add(vo);

	vo = new Member();
	vo.setAddress("부산");
	vo.setAge("22");
	vo.setName("다라마");
	list.add(vo);

	out.println(g.toJson(list));
	/* 	
	[{"name":"나다라","age":"21","address":"인천"},
	 {"name":"다라마","age":"22","address":"부산"}] 
	 */
%>
package com.freeflux.dto;

public class Member {
	
	private String name;
	private String age;
	private String address;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
	@Override
	public String toString() {
		return "Mamber [name=" + name + ", age=" + age + ", address=" + address + "]";
	}
}

요청 후 전달 받는 값이 두개 이상인 경우 전달 되는 형태

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>ajax.html : 값을 여러개 보내기</title>
	
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#ajaxCall').click(function(){
				
				var request = $.ajax({
					url:"ajaxResult.jsp",
					method:"POST",
					data:{paraNum:1},
					dataType:"json"
				});
				
				request.done(function(data){
					console.log(data); //String
					/* param1: 1
					param2: 2
					__proto__: Object */

					console.log(data.param1);
					//1
					console.log(data.param2);
					//2
					
					
				});
				
				request.fail(function(jqXHR, textStatus){
					alert("요청 응답 실패  :  "+textStatus);
				});
				
			});
	
		});	
	</script>
</head>

<body>

	<button type="button" id="ajaxCall">호출</button>
	
</body>
</html>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ page import="com.google.gson.Gson" %>
 <%@ page import="java.util.*" %>
<%
	// 응답 콘텐츠 타입 설정
	response.setContentType("application/json");

	/*
		Content-Disposiont : inline // 브라우저에서 응답하기
		Content-Disposiont : attachment // 팝업(alert) 형태 응답하기
	*/
	
	// 해당 해더로 브라우져에서 바로 응답
	response.setHeader("content-Disposiont", "inline");
	
	String paraNum = request.getParameter("paraNum");
	System.out.println(paraNum);
	
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("param1",1);
	map.put("param2",2);
	
	if(paraNum.equals("1")){
		map.put("param1", 1);
	}else if(paraNum.equals("2")){
		map.put("param2", 2);
	}else{
		map.put("param1",1);
		map.put("param2",2);
	}
	//맵은 파라미터명이 동일하면 덮어쓰기가 됨 
	
	Gson g = new Gson();
	out.println(g.toJson(map));//g.toJson(map) => String 
	
%>

jquery_ajax_proto.war
0.25MB

저작자표시 비영리 변경금지 (새창열림)

'복습 ARCHIVE > java script' 카테고리의 다른 글

[html] 달력 및 날짜 input data / 파일 첨부  (0) 2021.06.08
[jQuery - Ajax] 형 변환하여 사용, 배열 값 전달  (0) 2021.06.08
[jQuery - Ajax] 기본 사용법  (0) 2021.06.08
[jQuery] .trigger() , .unbind(), .show(), .hide(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate(), .stop(), .width(), .height  (0) 2021.06.08
[jQuery] .eq(), .children(), .is(), .not(), .end()  (0) 2021.06.08
'복습 ARCHIVE/java script' Related Articles more
Comments