본문 바로가기
프론트공부

[통신]js fetch get방식 / js fetch get / javascript fetch get방식 / 자바스크립트 get방식 / js get 서버 통신

by 으노으뇨 2022. 12. 12.
728x90
반응형
SMALL
fetch() 기본 문법을 이용한 get방식 통신

fetch() 문법을 이용하여 서버와 통신을 하고 값을 주고 받는 것을 정리한 포스팅

  1. 간단하게 URL을 호출하고 서버에 접근
  2. 서버로 데이터 전송하는 대표적 2가지 방법
  3. 서버에서 값을 가져오기
사용 예제
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FETCH TEST 페이지 입니다.</title>
</head>
<body>
	</br>
	<input type="button" id="get" value="send data get">
	</br>
	<script type="text/javascript" src="/resources/js/test/FileTest.js"></script>
</body>
</html>

JS소스 

window.addEventListener('load', addEventFile);

function addEventFile()
{
		document.getElementById('get').addEventListener('click', _get);
}
function _get()
{
	let inData = {
		name	:	'unokim'
		,age	:	28
	}
}

기본적으로 보낼 데이터

	let inData = {
		name	:	'unokim'
		,age	:	28
	}

실행 화면

조건
1. 외부 라이브러리나 외부 의존성을 주입한 소스는 사용하지 않고 기본 함수, 스프링 어노테이션만 사용한다.
2. 전송데이터는 Map<String, String>기준으로 진행하며, Map<String, Map>과 같이 복잡한 구조는 사용하지 않는다.
3. 환경설정이나 기타 config 설정을 변경하지않고, rest api 통신명세를 지키려고 노력한다.

fetch()를 이용해서 간단하게 URL 호출 및 서버접근

기존적으로 URL 만 담아서 보내는 GET방식

사용하는 JS소스
 
function _get()
{
	fetch("fetch");
}
서버 소스
 
	@GetMapping(value = "fetch")
	private String getFetch()
	{
		return null;
	}

실행 화면
간단한 URL 호출하여 서버에 접근한 모습

설명 : 간단하게 fetch()  안에 URL을 넣어서 실행한 모습

fetch() 함수 내에 get방식을 명시하여 보내는 방식

사용하는 JS소스
 
function _get()
{
	fetch("fetch",{
		method:"GET"
	});
}
서버 소스
:: 동일 ::
실행 화면
:: 동일 ::
설명 : 메소드를 명시해주고 실행해도 정상적으로 접근 가능하다.

서버로 데이터 전송하기

데이터를 쿼리스트링으로 전송하기 @RequestParam으로 서버에서 받는다.

사용하는 JS소스
 
function _get()
{
	let inData = {
		name	:	'unokim'
		,age	:	28
	}
	let param = new URLSearchParams(inData).toString();
	fetch("fetch?" + param);
}
서버 소스
 
	@GetMapping(value = "fetch")
	private String getFetch(@RequestParam final Map<String, String> param)
	{
		return null;
	}

실행 화면
쿼리스트링으로 object를 문자열로 서버로 보내는 화면
서버로 해당 값들을 성공적으로 모두 문제없이 가져온 모습
설명 : 쿼리스트링으로 문자열로 바꿔서 파라미터로 전송하는 방식이다. 주로 이 방법을 통해 서버로 전송해준다. 

@PathVariable을 이용해서 서버에 값을 전송하는 방법

사용하는 JS소스
 
function _get()
{
	let inData = {
		name	:	'unokim'
		,age	:	28
	}
	fetch(`fetch/${inData.name}/${inData.age}`);
}
서버 소스
 
	@GetMapping(value = "fetch/{name}/{age}")
	private String getPathFetch(
			@PathVariable(value = "name") String name
			, @PathVariable(value = "age") String age)
	{
		return null;
	}

실행 화면
각각 이름과 나이가 모두 정상적으로 들어온 모

서버에서 값을 받아오는 방법

xml 형태로 값을 받아오는 경우

사용하는 JS소스
 
function _get()
{
	let inData = {
		name	:	'unokim'
		,age	:	28
	}
	let param = new URLSearchParams(inData).toString();
	fetch("fetch?" + param)
	.then((rs) => {
		return rs.text()
	})
	.then((data)=>{
		console.log(data);
	});
}
서버 소스
 
	 @GetMapping(value = "fetch")
	 private Map<String, String> getFetch( 
		@RequestParam final Map<String, String> param)
	 {
		 return param;
	 }

실행 화면
서버에서 웹으로 반환하는&nbsp; 값
상태가 200, ok 가 true = 통신성공
웹콘솔에 xml 형태로 값이 정상적으로 나온모습

설명 : 현재의 방법은 xml값으로 가져올때 방법이다. text() 매서드를 이용해서 text()형태로 값을 받아와서 처리하면된다.
참고 : https://developer.mozilla.org/en-US/docs/Web/API/Response/text

JSON으로 서버에서 값을 가져왔을때

사용하는 JS소스
 
function _get()
{
	let inData = {
		name	:	'unokim'
		,age	:	28
	}
	let param = new URLSearchParams(inData).toString();
	fetch("fetch?" + param)
	.then((rs) => {
		return rs.json() // <== 여기가 text() > json()으로 바뀜
	})
	.then((data)=>{
		console.log(data);
	});
}
서버 소스
 
	@GetMapping(value = "fetch")
	@ResponseBody
	private Map<String, String> getFetch(
			@RequestParam final Map<String, String> param)
	{
		return param;
	}

실행 화면
JSON 형식으로 콘솔로 나온 모습설명

 

728x90
반응형
LIST
저작자표시 비영리 (새창열림)

'프론트공부' 카테고리의 다른 글

[javascript]자바스크립트에서 getter/setter 구현하기 + 접근제한자 private 이용하기  (0) 2023.01.05
[통신] js fetch로 파일 전송 / fetch로 파일 / fetch() file / fetch로 파일외 다른 정보 보내기 / js 서버로 파일 전송 / 자바스크립트 서버로 파일전송 / 자바스크립트 파일 업로드 / js 파일 업로드 / js로..  (0) 2022.12.12
[JS] 자바스크립트로 다중 Sheet 엑셀 다운로드 / Export Multi sheets Excel Using JavaScript  (1) 2022.11.21
[JS]자바스크립트를 이용해서 웹페이지의표를 엑셀로 다운로드하기 / js 엑셀 다운로드 / 라이브러리 미사용  (0) 2022.11.21

관련글

댓글

티스토리툴바