[Vanilla JS] fetch - GET, application/x-www-form-urlencoded 로 요청하기!

# fetch - GET, application/x-www-form-urlencoded

 주로 사용하는 ajax 대신 fetch 로 GET방식 application/x-www-form-urlencoded 타입으로 통신하기!

# 환경

/**
 * tool: sts 4.13.0
 * version: 2.7.3-SNAPSHOT
 * java: 1.8
 * type: maven
 * view: Thymeleaf
 */

# test page

 

# test page html

<h1>바닐라JS 테스트 페이지 입니다.(not use jQuery)</h1>

<h3>fetch</h3>
<input type="text" id="reqValue" value="테스트" style="display: inline;"/>
<input type="button" onclick="get()" value="GET" style="display: inline;"/>
<input type="button" onclick="post()" value="POST" style="display: inline;"/>
<input type="button" onclick="json()" value="JSON" style="display: inline;"/>

# fetch (get) javascript example code

function get() {
    const params = {
        text: reqValue.value,
        number: 1001
    }
    fetchGet("/test/vanilla/fetch/get", params)
        .then((data) => console.log('OUTPUT:', data.type, data.result))
        .catch((error) => console.log(error))
    ;
}
// FORM GET 메서드 구현 예제
async function fetchGet(uri, params) {
    const query = new URLSearchParams(params).toString();
    console.log('INPUT:', query);
		
    const target = uri + "?" + query;    
    const response = await fetch(target);
    return response.json();
}

# fetch (get) java example code

@Slf4j
@Controller
@RequestMapping("/test/vanilla")
public class TestVanillaController {

    @GetMapping("/fetch/get")
    public ModelAndView fetchGet(@RequestParam Map<String, Object> input) {
        log.debug("[PARAMETER] {}", input);
        ModelAndView mav = new ModelAndView("jsonView");
        
        mav.addObject("result", input);
        mav.addObject("type", "get-form");
        return mav;
    }
}

# log

javascript log
INPUT: text=%ED%85%8C%EC%8A%A4%ED%8A%B8&number=1001
OUTPUT: get-form {text: '테스트', number: '1001'}

java log
[PARAMETER] {text=테스트, number=1001}

# Vanilla JS 시리즈

https://hjho95.tistory.com/18 fetch - GET, application/x-www-form-urlencoded
https://hjho95.tistory.com/19 fetch - POST, application/x-www-form-urlencoded
https://hjho95.tistory.com/20 fetch - POST, application/json

# Vanilla JS 시리즈의 참조 페이지.

MDN fetch: https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch