[포스코X코딩온] 동적 Form 전송 (Ajax, Axios, Fetch)

웹 개발

[포스코X코딩온] 동적 Form 전송 (Ajax, Axios, Fetch)

끊임없이 성장중인 개발자 2023. 11. 28. 20:16

728x90

포스팅 주제

동적 Form 전송
Ajax, Axios, Fetch
JSON

동적 폼 전송

Form 전송은 동기 방식과 비동기 방식 두가지가 있다.

동기방식

한 번에 하나만 처리 -> 새로운 페이지로 이동해 서버가 데이터를 처리

비동기 방식

서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가능! (페이지 전환을 일으키지 않고 처리 가능)

비동기 방식으로 폼 전송을 하기 위해서는 클라이언트 단에서 전송을 타입을

submit이 아닌 button 타입으로 정의해야 한다.

비동기 HTTP 통신 방법

Dynamic

웹 문서가 정적으로 멈춰 있는게 아니라 실시간으로 변경된는 것

비동기 HTTP 통신

Form 데이터를 서버와 dynamic하게 송수신 하는 것
Ajax, Axios, Fetch 등의 방식이 있다

Ajax

Asynchronous JavaScript And XML의 약자
JS를 이용해 클라이언트와 서버 간 데이터를 주고받는 비동기 HTTP 통신방식
장점
- jQuery를 통해 쉽게 구현 가능
- Error Success, Complete의 상태를 통해 실행 흐름 조절 가능
단점
- jQuery를 사용해야만 한다.
- Promise 기반이 아니다.

Ajax를 쓰기 위해서는 jQuery CDN을 추가해줘야 한다.

https://releases.jquery.com

jQuery CDN

jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac

releases.jquery.com

Dynamic한 Form 전송에 대한 모습을 보여주기 위해 해당 결과를 새 페이지로 이동 X

아래에 결과를 출력!!😬

이때 button은 type='button'으로 설정해서 페이지 이동을 시키지 않는다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Ajax를 사용하시 위해 jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous">
        </script>

</head>

<body>
    <h1>동적 폼 전송 연습하기!</h1>

    <!-- 이름, 성별 (라디오 버튼)을 입력받는 폼 -->
    <form name="register">
        <label for="name">이름</label>
        <input type="text" name="name" id="name2" required>
        <br>

        <input type="radio" name="gender" value="m" id="male" required>
        <label for="male">남</label>

        <input type="radio" name="gender" value="f" id="female">
        <label for="female">여</label>

        <br><br>

        <button type="button" onclick="ajaxGet()">Ajax Get 제출</button>
        <button type="button" onclick="ajaxPost()">Ajax Post 제출</button>
        

    </form>
    <!-- 동적 폼 전송 결과를 보여줄 곳 -->
    <div class="result"></div>

    <script>

        // result 박스 선택
        const resultBox = document.querySelector('.result');
        function ajaxGet() {
            // 폼 선택( 가져오기 )
            const form = document.forms['register'];

            // 폼 요소 확인
            console.log(form);
            console.log(form.name); // name값을 넣든
            console.log(form.name2); // id값을 넣든 같은 결과가 출력
            console.log(form.gender);


            // 폼 요소 valure 값
            const data = {
                // 키 값:
                name: form.name.value,
                gender: form.gender.value
            }

            console.log('data >', data);

            // Ajax로 서버에 Get 요청 보내기
            $.ajax({
                type: 'get', // 요청의 종류(= form에 있던 method 속성)
                url: '/ajax', // 요청의 경로(= form에 있던 action 속성)
                data: data, // 요청에 보낼 데이터 (서버가 받게될 값)
                success: function (data) {
                    // 요청이 성공적으로 수행 되았을 때 실행할 함수
                    console.log(data);
                    resultBox.textContent = `get /ajax 요청 완료! ${data.name}님의 성별은 ${data.gender}!`;
                }
            })
        }
        
        function ajaxPost() {
            const form = document.forms['register'];
            // 서버로 보낼 데이터
            const data = {
                // 키 값:
                name: form.name.value,
                gender: form.gender.value
            }
            $.ajax({
                type: 'post', // 요청의 종류(= form에 있던 method 속성)
                url: '/ajax', // 요청의 경로(= form에 있던 action 속성)
                data: data, // 요청에 보낼 데이터 (서버가 받게될 값)
                success: function (data) {
                    // 요청이 성공적으로 수행 되았을 때 실행할 함수
                    console.log(data);
                    resultBox.textContent = `post /ajax 요청 완료! ${data.name}님의 성별은 ${data.gender}!`;
                }
            })
        }
	</script>
</body>
</html>

Ajax를 사용하기 위해서는 jQuery를 사용할 때 처럼 '$'를 사용해야 한다.

그렇기 때문에 jQuery CDN을 추가해 준 것이다.

*method 는 get방식과 post방식으로 처리 가능하다.

success: function(data)를 통해 값이 성공적으로 전달 되면 함수를 실행한다.

document.forms['form 이름'] 으로 form안에 있는 내용을 받아 올 수 있다.

app.js

const express = require('express');
const app = express();
const PORT = 8000;

app.set('view engine', 'ejs');
app.set('views', './views');

app.use(express.urlencoded({extended : true})); //주소 형식으로 데이터를 보내는 방식, 미들웨어
    // 클라이언트로 부터 받은 http 요청 메시지 형식에서 body데이터를 해석하기 위해, true로 설정하면 qs(querystring)모듈을 사용(node.js 내장)

app.use(express.json()); // json형태의 데이터를 해석


app.get('/', (req, res) =>{
    res.render('index');
})

// ajax
app.get('/ajax', (req, res) =>{
    console.log(req.query);
    res.send(req.query);
})

app.post('/ajax', (req, res) =>{
    console.log(req.body);
    res.send(req.body);
})


app.listen(PORT, () =>{
    console.log(`server is opening ${PORT}`);
})

* get 방식은 서버에서 req.query로 전달받음

*post 방식은 서버에서 body로 받는다. req.body

*미들웨어 접근

app.use(express.urlencoded({extended : true})
- body 데이터를 해석하기 위해(post) , qs 모듈 사용
app.use(express.json())
- json형식 해석을 위해

Axios

Node.js와 브라우저를 위한 Promise API를 활용
비동기 HTTP 통신이 가능, returnd이 Promise 객체로 온다
장점
- Promise 기반
- 브라우저 호환성이 뛰어나다
단점
- 모듈 설치 or 호출을 해줘야 사용이 가능하다

Axios를 사용하기 위해서는 npm을 설치하고 CDN을 불러와야 한다.

npm install axios

Axios CDN

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코

axios-http.com

function axiosGet() {
            const form = document.forms['register'];
            const data = {
                name: form.name.value,
                gender: form.gender.value,
            };

            // 태그의 validate 검사해주는 메서드
            console.log(form.name.checkValidity()); // true, false 값을 반환한다.
            
            // 같은 name으로 묶인 radio버튼은 하나만 석택해도 true 반환
            console.log('radio > :', form.gender[0].checkValidity()); // node list 형식이라 하나의 값에 접근하기 위해 [0]
            console.log('radio > :', form.gender[1].checkValidity());

            // axios 요청의 결과는 Promise 객체
            // -> then, catch 메서드로 체이닝 가능!
            // -> async await 사용 가능!

            // 1) then, catch + params 사용
            
            axios({
                method:'get',
                url: '/axios',
                params: data //서버로 보낼 데이터
            }).then((response) =>{
                // 성공하면 실행될 함수
                console.log(response); // 서버 응답 결과
                console.log(response.data); // 응답 데이터 확인

                const data = response.data;

                resultBox.textContent = `Get /axios 요청 완료! ${data.name}님의 성별은 ${data.gender}!`;
            }).catch((error) => {
                console.log('error!', error);
                resultBox.textContent = `Get /axios 요청 완료! ${error.response.data}`;
            })

.checkValidity()를 사용하면 true, fales 값을 반환하여 요소를 검사하는 기능을 만들 수 있다.

Axios는 Promise를 사용함

then, catch 사용가능
async, wait 사용가능

**get method를 사용할 경우 서버로 데이터를 보낼때 params를 사용한다.

catch문으로 에러를 처리 가능하다!

url 형식으로 값을 주면 params를 사용하지 않고도 값을 서버로 보낼 수 있다.

url : `/axios?name=${data.name}&gender=${data.gender}`

try-catch ver.1

async function exec() {
                try {
                    // 폼 유효성 검사 추가
                    // nama값에 입력값이 없다면, '이름을 입력해 주세요'
                    // gender에 입력값이 없다면, '성별을 선택해 주세요'
                    // resultBox에 띄우기
                    // 둘다 입력이 잘 됬으면, axios 요청을 보내기

                    let names = form.name.checkValidity();
                    let genders = form.gender[0].checkValidity();

                    if (names == false && genders == false) {
                        resultBox.textContent = '이름과 성별을 입력해 주세요';
                    } else if (names == false) {
                        resultBox.textContent = '이름을 입력해 주세요';
                    } else if (genders == false) {
                        resultBox.textContent = '성별을 입력해 주세요';
                    } else {
                        axios({
                            method: 'get',
                            url: '/axios',
                            params: data //서버로 보낼 데이터
                        }).then((response) => {
                            const data = response.data;
                            resultBox.textContent = `Get /axios 요청 완료! ${data.name}님의 성별은 ${data.gender}!`;
                        })
                    }
                } catch (err) {
                    resultBox.textContent = '성별을 입력해 주세요';
                }
            }
            exec();

try-catch ver.2

async function axiosGet() {
            const form = document.forms['register'];
            const data = {
                name: form.name.value,
                gender: form.gender.value,
            };

            console.log(form.name.checkValidity());
            console.log('radio > :', form.gender[0].checkValidity());
            console.log('radio > :', form.gender[1].checkValidity());

            try {

                if (!form.name.checkValidity()) { //!false
                    resultBox.textContent = '이름을 입력해 주세요'
                } else if (!form.gender[0].checkValidity()) {
                    resultBox.textContent = '성별을 입력해 주세요'
                } else {

                    // await을 쓸때 변수를 만들어서 넘겨준다.
                    const response = await axios({
                        method: 'get',
                        url: '/axios',
                        params: data
                    }) // response에는 서버에서 받은 결과가 담긴다.
                    console.log(response);
                    const {
                        name,
                        gender
                    } = response.data;

                    resultBox.textContent = `Get /axios 요청 완료! ${name}님의 성별은 ${gender}!`;
                }
            } catch (err) {
                console.log('error', err)
                resultBox.textContent = `Error`;
            }
        }

Axios Post 방식

function axiosPost() {
            const form = document.forms['register'];
            const data = {
                name: form.name.value,
                gender: form.gender.value,
            };

            axios({
                method: 'post',
                url: '/axios',
                data: data
            }).then((response) => {
                console.log(response);
                const {
                    name,
                    gender,
                    msg
                } = response.data
                
                resultBox.textContent = `Get /axios 요청 완료! ${name}님의 성별은 ${gender}! ${msg}`;
            })

        }

**Axios Post방식은 method: 'post'를 넣고 paramse대신 data에 서버에 보낼 값을 넣는다.

서버쪽 에서 직접 값을 주는 것도 가능하다. => msg

// axios
app.get('/axios', (req, res) =>{
    console.log(req.query);
    res.send(req.query);

    // 의도적으로 에러 발생시킴
    // res.status(400).send("error msg!!")
})

app.post('/axios', (req, res) =>{
    console.log(req.body);
    // res.send(req.body);

    console.log({name: req.body.name, gender: req.body.gender, msg: 'fet성공'})
    res.send({name: req.body.name, gender: req.body.gender, msg: 'fet성공'});
})

app.post를 보면 send에 msg값을 직접 넣어 보낸다.

Fetch

ES6부터 들어온 JS 내장 라이브러리
Promise 기반
장점
- JS 내장 라이브러리 이므로 별도의 import가 필요하지 않다.
- Promise 기반이다
단점
- 최신 문법이라 호환성이 좋지 않다.
- Timeout 기능이 없다.
- 상대적으로 Axios에 비해 기능 부족

fetch Get

 function fetchGet() {
            const form = document.forms['register'];
            const data = {
                name: form.name.value,
                gender: form.gender.value
            }

            // fetch(url, option)
            fetch(`/fetch?name=${data.name}&gender=${data.gender}`, {
                method: 'get' //default 값이 get(생략 가능)
            }).then((response) => {
                console.log(response);
                return response.json();
                // 응답(response) 객체로부터 JSON 포맷의 응답 전문을 자바스크립트 객체로 변환, (json형태로)
                // response.text()
                // 응답(response) 객체로부터 값을 읽고 text형태로 반환
            }).then((data) => {
                // data 변수 : 직전 then 메서드의 리턴 값 : response.json(); 
                console.log('data : >', data);
                resultBox.textContent = `Get /fetch 요청 완료! ${data.name}님의 성별은 ${data.gender}!`
            })
        }

Get 방식은 fetch(url, option) 형태로 넣는다.

처음부터 url에 변수를 넣는 형식으로 url을 작성한다.

fetch()의 반환값 response객체의 body는 ReadableStream 이라고 보여지며, 값을 확인하기 어렵다.

response.json()을 하면 텍스트 데이터를 JSON으로 파싱한 결과로 반환받는 Promise가 된다.

참조 블로그 :

https://velog.io/@grinding_hannah/JavaScript-Promise-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

[JavaScript] Promise 알아보기

Promise 알아보기

velog.io

**response.json() => 응답을 json형태로 (JS 객체로) 만든다.

**response.text() => 응답을 text형태로 반환한다.

fetch Post

fetch('/fetch', {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json' // {key: value ....} json 객체로 페이로드
                },
                body: JSON.stringify(data),
                // data : js oj
                // JSON.stringify(daya) = json
            }).then((response) => {
                console.log(response);
                // console.log('response.json > ',response.json());
                return response.json(); //json() 메서드도 비동기 함수이기 때문에, 프로미스 반환
            }).then((data) => {
                console.log('data : >', data);
                resultBox.textContent = `Post /fetch 요청 완료! ${data.name}님의 성별은 ${data.gender}!`
            }).catch((err) => {
                console.log("error", err);
            })
        }

method: post

headers를 설정해줘야 한다.

'Content-Type' : 'application/json' - {key: value} 형태인 json 객체로 페이로드 된다.
object를 가지는 json 형태를 가질 수 있다.

JSON.stringify(): 자바스크립트 객체를 JSON 텍스트로 변환

JSON.parse(): JSON 형식에 텍스트를 자바스크립트 객체로 변환

저작자표시

'웹 개발' 카테고리의 다른 글

[포스코X코딩온] 데이터베이스 (MySQL) 설치 (0)	2023.11.29
[포스코X코딩온] 파일업로드 Multer (0)	2023.11.28
[포스코X코딩온] 폼(Form)태그 전송(Get, Post) (0)	2023.11.25
[포스코X코딩온] 비동기 처리 (5)	2023.11.24
[포스코X코딩온] JS 구조분해 할당 (1)	2023.11.23

현재글[포스코X코딩온] 동적 Form 전송 (Ajax, Axios, Fetch)

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

나의 성장 개발일지