JVASCRIPT AJAX(받아온 데이터로 html코드 만들기)

AJAX란?

 

AJAX는 Asynchronous JavaScript And XML의 약자로, 웹 페이지를 새로 고치지 않고도 서버에 데이터를 비동기적으로 요청하거나 전송할 수 있는 웹 개발 기술이며 XML이 들어가 있지만, 현대 웹에서는 JSON 형식의 데이터를 주고받는 데 더 많이 사용됩니다.

 

        // html을 추가할 root 불러오기
        const root = document.getElementById('root')
        
        // fetch에 들어갈 주소 지정과 method설정
        const url = '데이터를 받아올 요청주소'
        const opt = {
            method: 'GET'
        }
        
        fetch(url, opt)                  // 주소를 요청하면
        // resp Response 형태로 오게되는데
        // resp는 응답상태,헤더,본문등을 포함한다
        .then(resp => resp.json())  // 응답을 받아서 json형태로 처리하여
        .then(json => {             // json을 이용하여 코드를 진행하면 된다
            const arr = json
            console.log(arr)
            console.log(new Date(arr[0].BIRTH).toISOString().split('T')[0])

            arr.forEach(dto => {
                const item = document.createElement('div')
                item.classList.add('item')
                item.innerHTML += `<div>${dto.IDX}</div>`
                item.innerHTML += `<div>${dto.USERID}</div>`
                item.innerHTML += `<div>${dto.USERPW}</div>`
                item.innerHTML += `<div>${dto.USERNAME}</div>`
                item.innerHTML += `<div>${new Date(dto.BIRTH).toLocaleDateString()}</div>`
                item.innerHTML += `<div>${dto.GENDER}</div>`
                root.appendChild(item)
            })
        })