Node.js, MongoDB 로 웹서비스 만들기 - 8. Ajax 로 post 요청

로그인 하려면 아이디가 있어야 되니까 회원가입부터 만들거임

 

회원가입 입력폼

<div class="container mt-4">
    <form action="/register" method="POST">
      <fieldset>
        <legend>회원가입</legend>
        <div class="mb-3">
          <label for="id" class="form-label">아이디</label>
          <input type="text" id="id" class="form-control" name="id">
        </div>
        <div class="mb-3">
          <label for="pw" class="form-label">비밀번호</label>
          <input type="password" id="pw" class="form-control" name="pw">
        </div>
        <button id="register" type="button" class="btn btn-outline-dark">회원가입</button>
        <a href="/member/login" class="btn btn-outline-primary">뒤로</a>
      </fieldset>
  </form>
</div>

이대로 회원가입 버튼을 submit 해서 보내도 되지만 

ajax 를 이용해 데이터를 보내면서 아이디 중복체크까지 하며 결과를 받을 생각이다. 

submit 해버리면 해당 페이지에서 응답을 받을 수 없으니깐

 

 

회원가입 버튼을 눌렀을 때 ajax 통신을 하게 코딩해봄

jquery 불러오는 코드 밑에 해야하는건 기본!

<script>
  $('#register').click(()=>{
    const id = $('#id').val();
    const pw = $('#pw').val();

    $.ajax({
      url: '/member/register', 
      method: 'POST', 
      data: {id: id, pw: pw}, 
    }).done((result)=>{
      console.log(result);
      console.log(result.message);
    })
  })
</script>

통신에 성공했을 때 받는 값을 테스트해볼겸 result 와 result.message 를 출력하게 해보았다.

 

 

member.js

router.post('/register', (req, res)=>{
    console.log('in register post');

    let id = req.body.id;
    let pw = req.body.pw;
    
    
    // 회원가입 데이터 DB 저장 코드 구현할 곳


    res.status(200).send({message: 'ajax 통신 성공 - id: ' + id + ', pw: ' + pw});
})

ajax 로 보낸 값은 요청.body 값 안에 들어있다. 

 

 

body 값이 undefined 로 뜨는 경우가 있는데 server.js 에 아래 코드 추가해줘야함!!!

app.use(express.urlencoded({extended: true}));

위 코드를 추가해야 body-parser 기능을 사용하게 되어 body 로 데이터 값을 받을 수 있다.

 

 

받은 id, pw 값을 다시 응답으로 200(성공) 코드와 함께 message 란 이름으로 보내줘봤다.

위가 result, 아래가 result.message

폼에 입력했던 값이 제대로 전달되어 다시 받은걸 볼 수 있다.

 

 

이제 디비에 회원가입 정보를 저장해보자

 

 

 

 

https://4sii.tistory.com/16

Node.js, MongoDB 로 웹서비스 만들기 - 9. 회원가입(1) - INSERT