javascript Ajax로 FormData를 보내보자

jangdu·2023년 5월 21일

javascript

목록 보기

15/16

frontend에서 사용되는 기능인데
보통 HTML에서 script안에 작정하는 부분인 AJAX로 FormData를 보내는 과정을 할아보자.

AJAX

ajax(Asynchronous Javascript And XML)는 비동기 웹 서비스 개발 시 사용하는 기법 중 하나인데,
XML을 무조건 사용하진 않고, 요즘에 JSON도 사용한다.
이 친구는 페이지 이동 안하고 서버에 요청 보내고 응답받는다.

axios

ajax는 보통 jQuery나 axios같은 라이브러리를 사용해서 보낸다.
브라우저에서 기본적으로는 fetch를 제공하긴 하는데, 이거는 좀 복잡하고 서버에서는 사용이 불가능해서(되긴하는데 아직은...) 오늘은 axios를 사용해보자.

일단 라이브러리를 추가한다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  여기에 코드 작성
</script>

이런식으로 사용해서 쓰면 된다.

axios get

axios
  .get("url")
  .then((result) => {
    console.log(result);
    console.log(result.data);
  })
  .catch((err) => {
	console.error(err);
  });

axios는 기본적으로 위처럼 사용하면 된다.
axios.get도 그 안에 Promise가 있으니까 then catch가 사용 가능하고,
result.data에 요청하고 받아온 데이터가 들어있다.

Promise니까 async/await또한 가능하다.
아래코드는 익명함수라서 즉시 실행하려고 ()감싼거임

(async () => {
      try {
        const result = await axios.get("url");
        console.log(result);
        console.log(result.data);
      } catch (error) {
        console.error(error);
      }
    })();

axios post

POST요청으로 데이터를 보내기

(async () => {
    try {
      const result = await axios.post("url", {
        name: 'duhoduho',
        birth: 1999,
      });
      console.log(result.data);
    } catch (error) {
	  console.error(error);
    }
})();

GET이랑 거의 유사한데, 두번째 인수에 데이터를 넣어야한다.
axios.post이런식으로 사용하면 된다.

FormData

HTML form 태그를 쓸 때, 데이터를 동적 제어할 수 있는 기능이다.
ajax랑 같이 많이 쓴다.

FormData생성자로 객체를 만들면서 시작한다.

const formData = new FormData();

append(key, value): 를 이용해서 키와 값을 집어 넣을 수 있다.

formData.append("name", "jangdu");
formData.append("color", "black");
formData.append("color", "red");

has(key): 키에 값이 있는지 true, false

formData.has("color"); //  true
formData.has("item"); // false

get(key): 키에 해당하는 value리턴 하나
getAll(key): 키에 해당하는 value 전부 리턴

formData.get("color"); // black
formData.getAll("color"); // ['black', 'red']

// get으로 배열도 집어 넣을 수 있음
formData.append("test", ["jang", "du", "hyeok"]);
formData.get("test"); // jang, du, hyeok

delete(key): 삭제
set(key, value): 수정

formData.delete("test");
formData.set("color", "blue");
formData.getAll("color"); // ['blue']

위 방식에 맞춰서 FormData를 만들고 axios같은거로 전송하면 됨
axios로 POST 요청 보내보면,

(async () => {
  try {
    const formData = new FormData();
    formData.append('name', 'jangdu');
    formData.append('birth', 1999);
    const result = await axios.post("url", formData);
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
})();

위의 코드처럼 보내면 된다.
HTML에서 form을 이용해서 하면 굉장히 손쉽게 요청할 수 있다.

encodeURIComponent, decodeURIComponent

axios같은 ajax요청을 보내다보면 한글같은게 들어가기도 한다.
서버에 따라서 한글같은거 못받을 수도 있음
이럴 때 window객체 메서드 쓰면 됨

encodeURIComponent: window객체 메서드인데 이거 한글 부분에 감싸면 됨

(async () => {
  try {
    const formData = new FormData();
    formData.append('name', 'jangdu');
    formData.append('birth', 1999);
    const result = await axios.post(`url/${encodeURIComponent('장두혁')}`, formData);
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
})();

이런식으로 하면됨
그러면 %EC%9E%A5%EB%91%90%ED%98%81이렇게 바뀌어서 들어간다.

이런거 받는 데에서 다시 decodeURIComponent로 받으면 된다.

decodeURIComponent('%EC%9E%A5%EB%91%90%ED%98%81') // 장두혁

이런식으로 한글 처리하는 용도로 이 메서드 자주 씀

데이터 속성 dataset

노드에서 웹 서버로서 클라이언트와 데이터를 주고받을 때,
서버에서 보낸 데이터를 어디에 보관해야할까?

보안관련해서 민감 정보는 프론트로 보내지 말아야함
그외의 정보는 ㄱㅊ

데이터 속성은 보통 HTML과 관련 데이터를 저장하는 국룰이다.

<ul>
  <li data-id='1' data-user-name='duho'>jang</li>
  <li data-id='2' data-user-name='du'>jang</li>
  <li data-id='3' data-user-name='hyeok'>jang</li>
</ul>
<scritp>
  console.log(document.auerySelector('li').dataset);
  // { id: '1', user-name: 'duho' }
</script>