익명의 개발노트

[Wecode 6일차] Node에서 ajax방식으로 데이터 전달하기. 본문

코딩일기/TIL

[Wecode 6일차] Node에서 ajax방식으로 데이터 전달하기.

캡틴.JS 2019. 6. 8. 20:08
반응형

왼쪽과 같은 브라우져에서 email을 입력하고, 제출또는 ajaxsend 버튼을 누르면 서버와 ajax 방식으로 데이터 주고 받기.

 

 

노드에서 ajax 방식은 크게 3가지이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>email form</title>
</head>
<body>
    <form action="/email_post" method="post">
       email : <input type="text" name="email"><br/>
        <input type="submit" >
    </form>
    <button class="ajaxsend">ajaxsend</button>

     <div class="ajaxresult"></div>   
     <script>
       아래에서 설명

email안에 input값 (inputdata)를 ajax함수를 만들어서 전달하고자 한다.

사전에 노드 +Express로 4000포트를 이용하여 서버을 열었고, 라우터는 아래와 같다.

 document.querySelector('.ajaxsend').addEventListener('click', function(){
            var inputdata = document.forms[0].elements[0].value;
            console.log(inputdata);
            sendAjax('http://localhost:4000/ajax_send_email',inputdata)
        });

Ajax 구현이 어떤 식으로 되는지 로직을 보면, 

 

주소값(목적지)과 그곳으로 보내는 데이터를 JSON 형식으로 만들어서

 

HTTP메소드인 GET이나 POST 방식으로 주고 받는다.

 

(메소드 방식, 타입은 필수)

 

1. XHR 방식

  //ajax 보내는 부분 : xhr방식
  function sendAjax(url, data){
    var data = {'email' : data};  //보내는 데이터
    data = JSON.stringify(data);  //문자열로 보내야 에러안남
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);    //보내는 방식 설정
    xhr.setRequestHeader('Content-Type', "application/json"); //서버로 보낼때 어떤 타입인지 명시
    xhr.send(data);  

    //ajax보내고 받아오는 부분.
    xhr.addEventListener('load', function(){
      var result = JSON.parse(xhr.responseText);  //받아온 자료 파싱.
      if(result.result1 !== "ok") return;
      document.querySelector('.ajaxresult').innerHTML=result.email;
    })
  }

2. fetch API

    fetch는 프로미스 기반이라, 리턴 값도 무조건 프로미스다.  

function sendAjax(url, data){
  var data = {'email' : data}; //보내야할 데이터
  //데이터 설정
  var dataInfo = 
        {  
          method : "POST",  //메소드 반드시 지정해줘야 app.js 파일에서 찾을수 있음.
          body : JSON.stringify(data),  //JSON 형태로 변환
          headers : {
          "Content-Type" : "application/json"  // 타입 반드시 지정해줘야함.. 
          }
        }
  
  //통상 인터넷에 떠도는 많은 예제내용.
  fetch(url,dataInfo)
     .then(res => {
       res.json().then(json =>  console.log(json.result) //JSON으로 받음.        
      )      
  })
  
  
  --------------------------------------------------------------------------
  나는 이걸 변수로 아래와 같이 담아서 inner.HTML = result.email;
  값으로 해보려고 했지만....   
  
  const result = fetch(url,dataInfo)
     .then(res => {
       res.json().then(json =>  console.log(json.result) //JSON으로 받음.        
      )      
  })
  
  안됨... 왜?? 프로미스라서 undefind 뜰 것이다.

그래서 생각을 한 결과.. 아래와 같이 하니 성공!

function sendAjax(url, data){
  var data = {'email' : data}; //보내야할 데이터
  //데이터 설정
  var dataInfo = 
        {  
          method : "POST",  //메소드 반드시 지정해줘야 app.js 파일에서 찾을수 있음.
          body : JSON.stringify(data),  //JSON 형태로 변환
          headers : {
          "Content-Type" : "application/json"  // 타입 반드시 지정해줘야함.. 
          }
        }
        
  fetch(url,dataInfo)
   .then(res => res.json())  //JSON형태로 받아온다. 
   .then(result => {   //JSON형태로 받은 결과를 result로 받고, 내부 값을 파악해서 로직작성한다.
      if(result.result1 === "ok"){
         document.querySelector(".ajaxresult").innerHTML = result.email;
      }
  })

3. Async, await 방식(가장 최신)

  //ajax 보내는 부분 : async api
  async function sendAjax(url, data){
    var data = {'email' : data};  //보내는 데이터
           
    var dataInfo = {
        method : "POST",  //메소드 반드시 지정해줘야 app.js 파일에서 찾을수 있음.
        body : JSON.stringify(data),   //JSON 형태로 변환
        headers : {
                   "Content-Type" : "application/json"  //타입지정
                  }
         };

    const reqURL = await fetch(url,dataInfo);  
    const result = await reqURL.json(); //JSON값 받아오기
    
     //내부값 파악 후 로직 작성
    if(result.result1 === "ok"){
       document.querySelector(".ajaxresult").innerHTML = result.email;
    }
  }

 

fetch 에서 삽질하는 바람에... 피같은 시간을 버린.... ㅠㅠㅠ

 

4. body-parser 

Node에서 url 라우팅을 하면, 모든 요청에 대해 일일이 서버에서 처리를 해주어야 한다.

get방식으로는 get : req, param('email') 이런 식으로 가능하지만,  post방식으로는 받을 수 가 없어서, body 부분에서 param 값만 가져올 수 있도록 body-parser를 사용한다.

var bodyParser = require('body-parser'); //post방식으로 데이터 받기위해 사용

app.use(bodyParser.json()); //데이터가 제이슨으로 오면 받아야하고.
app.use(bodyParser.urlencoded({extended:true})); // 클라,서버간 데이터 주고 받을때 인코딩해서 보냄.(아스키형태)

 

5.템플릿 엔진

html +데이터를 섞어서 보내기 위해 사용하며 종류로는 ejs, jude, pug, handlebars 등이 있고, 템플릿엔진 문법이 있다.

사용하고자 하는 값의 view 폴더를 만들고 그 안에 ejs 파일을 만든다.

//email.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>email ejs</title>
</head>
<body>
    <h1>Welcome!! <%= email %></h1>   //바꾸고자하는 곳에 저렇게..
    <p>정말로 반가워여</p>
</body>
</html>


//app.js

app.set('view engine', 'ejs'); // ejs모듈은 설치만하고 set함수를 통해서 지정만 해주면 익스프레스에서 알아서 찾아쓴다.

//form post방식 요청오면 여기서 받아서.
app.post('/email_post', (req, res)=>{
  console.log(req.body.email); //email => html body의 input name값.
 //위의 로그값은 터미널에서 확인할 수있음. 
 // res.send("post response"); //ejs 설치하면render이용해서 값 치환
 res.render('email.ejs',{'email': req.body.email}); 
 });
반응형

'코딩일기 > TIL' 카테고리의 다른 글

[Wecode 23일차] 미니터 코드리뷰 & 스타일 적용  (0) 2019.06.24
[Wecode 19일차] 리액트 이벤트 & 페이지 전환  (0) 2019.06.20
[Wecode 18일차] 리액트 이벤트핸들러, state, jsx for문  (0) 2019.06.19
[Wecode 5일차] promise패턴, 바닐라 자바스크립트 복습  (0) 2019.06.07
[트위터 미니버전] 트윗화면 div -> form 태그 수정하기.  (0) 2019.06.07
'코딩일기/TIL' Related Articles more
Comments