Fetch3 [javascript] 자바스크립트 fetch로 JSON post (then, async, await) 참고: https://ultimatecourses.com/blog/fetch-api-post-json 이 포스트에서는 fetch api를 사용하여 JSON 데이터를 서버로 post하는 방법을 알아보겠습니다. 이를 위해 먼저 form과 submit으로 이루어진 HTML 파일을 만들어 fetch로 백엔드 서버에 데이터를 post하도록 하겠습니다. 먼저 post할 데이터를 잡기위해 form에 name 속성을 줍니다. Submit form의 참조를 잡기위해 document.forms를 사용하여 name="fetch"인 항목을 찾습니다. const form = document.forms.fetch; const handleSubmit = (e) => { e.preventDefault(); }; form.addEve.. 2023. 2. 1. [javascript] 자바스크립트 fetch로 formdata post 보내기 폼 데이터를 전송할 때 JavaScript의 fetch api를 사용하면 데이터 전송을 세밀하게 제어할 수 있습니다. 이는 submit과 동시에 데이터를 전송하고 새 페이지로 리다이렉션하는 표준 HTML 동작으로 처리하지 않고 최소한의 dom 조작으로 그냥 백그라운드에서 더이터 전송을 처리하고 효율적으로 통신할 수 있도록 합니다. 준비 post 메시지를 보내는 작업을 하기 전에 post로 보낼 form이 필요합니다. 간단하게 사용자 이름과 비밀번호 두 개의 입력필드를 가지는 양식을 만들어보겠습니다. 먼저 index.html 파일을 만들고 다음의 코드를 입력합니다. Submit 위 코드를 실행하면 다음과 같은 화면을 얻게됩니다. form에 submit 이벤트 추가 먼저 폼 항목을 선택하고 submit 이벤.. 2022. 9. 1. [javascript] 자바스크립트 fetch api 사용 방법 참고: https://www.javascripttutorial.net/javascript-fetch-api/ 이 튜토리얼에서는 javascript의 fetch api를 사용하여 어떻게 비동기 HTTP 요청을 하는지 알아보겠습니다. fetch api는 웹브라우저에서 서버로 HTTP 요청을 하게 해주는 최신 인터페이스입니다. 만일 XMLHttpRequest(XHR) 객체를 사용하고 있다면 fetch api로 모든 작업을 대체할 수 있습니다. 추가적으로 fetch api는 서버에서 웹브라우저로 데이터를 전송할 때 유연한 기능을 제공하기 위해 Promise를 사용하기 때문에 더 간단하고 깔끔합니다. fetch() 메소드는 웹브라우저에서 URL 요청을 전송할 때 전역 스코프를 가지기 때문에 어디서든 사용이 가능합.. 2022. 5. 4. 이전 1 다음
