[Node.js] json 활용한 Ajax 처리

✱HTML 파일

<form action="/email_post" method="post">
   email: <input type="text" name="email"><br/>
   <input type="submit">
</form>

<button class="ajaxsend">ajaxsend</button>

<div class="result"></div>

 

✱JS 파일

// ajaxsend 버튼 이벤트 등록
document.querySelector('.ajaxsend').addEventListener('click', function() {
   const inputdata = document.forms[0].elements[0].value;
   sendAjax('http://127.0.0.1:3000/ajax_send_email', inputdata);
})

// 이벤트 핸들러
function sendAjax(url, data) {
   const data = {'email': data};
   data = JSON.stringify(data);
   
   const xhr = new XMLHttpRequest();
   xhr.open('POST', url);
   xhr.setRequestHeader('Content-Type', "application/json");
   xhr.send(data);
   
   xhr.addEventListener('load', function() {
      const result = JSON.parse(xhr.responseText);
      if(result.result !== "ok") return;
      document.querySelector(".result").innerHTML = result.email;
   });
}

✘ data = JSON.stringify(data)

send할 때 문자열 형태로 보내주기 위해 객체를 문자열로 변환

✘ xhr.open('POST', url)

첫 번째 인자는 method, 두 번째 인자는 url

✘ xhr.setRequestHeader('Content-Type', "application/json")

서버로 보낼 때 json 타입을 보내겠다는 것을 알림.

✘ xhr.addEventListener('load', 콜백)

응답이 왔을 때 콜백 실행

✘ xhr.responseText

서버에서 응답받은 것을 문자열로 받음. 그래서 JSON.parse로 객체로 만들어줌

 

✱express 파일(app.js)

const express = require('express')
const app = express()

app.listen(3000, function() {
   console.log('start, express server on port 3000');
});

app.use(express.static('public'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
app.set('view engine', 'ejs')


//url routing
app.get('/', function(req, res) {
   res.sendFile(__dirname + '/public/main.html')
});

app.post('/email_post', function(req,res) {
   console.log(req.body.email)
   res.render('email.ejs', {'email': req.body.email})
})

// -----이 윗 부분은 이전 포스팅에서 설명했습니다. 아래 코드만 설명하겠습니다.-----

app.post('/ajax_send_email', function(req,res){
   console.log(req.body.email)
   const responseData = {'result': 'ok', 'email':req.body.email}
   res.json(reponseData)
})

마지막 코드의 윗 부분을 설명한 이전 포스팅

✘ app.post

js파일에서 xhr.open('POST',url)로 post로 요청했기 때문에 post로 받은 것.

✘ req.body.email

클라이언트에서 받은 데이터 객체의 email(키)의 속성값. js파일에서 data={'email':data} 이 부분.

✘ res.json(json)

클라이언트 쪽에 json형식의 응답을 보낸다. stringify 안 해주고 json 객체 그대로 넘김.

 

---

참고📚

 

인프런 무료 강의 -  Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해