jquery ajax 기본예제

*구현할 것
text input에 넣은 값을 버튼을 통해 서버로 보내서
그 값을 다시 받아온 후 페이지상에 표시한다.
이것을 jquery ajax를 이용해 구현한다.

(코드는 아래에 첨부)
알게된 것: jquery를 사용한 ajax통신의 기본 로직
알고싶어진 것: res.send와 res.json의 차이점

app.js

app.post('/ajax-jquery', (req,res)=>{
  console.log('test');
  let data = req.body.email;
  let responseData = {};
  responseData.email = data;

  res.json(responseData);
})

html 파일 (ajax.html)

<h1>testing ajax with jquery</h1>
    
    <input type="text">
    <input id="button" type="button" value="insert">
    <div>EMAIL : <span id='getData'></span></div>
    <script>
        let btn = document.querySelector('#button');
        btn.addEventListener('click', ()=>{
            let data = document.querySelector('input').value
            console.log('data :', data);
            $.ajax({
                url: '/ajax-jquery',
                type: 'POST',
                dataType: 'json',
                data: {'email' : data},
                success: (data)=>{
                    if(data) {
                        console.log(data);
                        document.querySelector('#getData').innerHTML = data.email
                    }else{
                        alert('No DATA');
                    }
                }
            })
        })
        </script>코드를 입력하세요