ajax 2개 실행 관련 질문입니다.

[xaxa]

TimerBtn.ejs에서 '시작버튼'을 누르면 아래의 두 ajax를 실행하고자 합니다.
1) /btnCheck로 post요청 ajax
2) /TimerPrint로 get요청 ajax + data : {isClick : 1}

[현재상황 및 문제점]
- 1은 잘 실행이 되며, 테스트로 data 전송하면 서버에서 잘 받아집니다.
- 2는 실행되지 않아서 data인 {isClick : 1}을 서버에 전송할 때 콘솔에 출력하니 1이 아닌 undefined가 출력됩니다.

TimerPrint에 get요청 시 StartTimer()가 실행되는 상황인데,
TimerBtn의 시작버튼 클릭했을 때만 TimerPrint에서 StartTimer()를 실행하고자
TimerBtn.ejs에서 /TimerPrint로 get요청 ajax + data : {isClick:1}을 사용하고자 합니다.
isClick을 콘솔에 출력하면 1이 아닌 undefined가 출력되는데, 코드에 문제가 있나요?ㅠㅠ

<<TimerBtn.ejs>>-----------------------------------------------------------
<script>
      $('#startBtn').click(function() {   //startBtn을 click했을 때
        $.ajax({  // branchinfo로 post요청 시 해당 data도 같이 보냄
          method : 'POST',
          url : '/btncheck',
          //data : {isUse1:"사용중"}
          //data : {isClick:true}
        }).done(function(결과){
          //AJAX 성공시 실행할 코드는 여기
          console("ajax 성공>> " + " 결과 : " + 결과);
        }).fail(function(에러){
          //실패시 실행할 코드는 여기
          console("ajax 실패>> " + " 에러 : " + 에러);
        });

        $.ajax({  
          method : 'POST',
          url : '/TimerPrint',
          data : {isClick:1}              //이 부분이 undefined로 보내집니다 ㅠㅠ
        }).done(function(결과){
          //AJAX 성공시 실행할 코드는 여기
          console("ajax 성공>> " + " 결과 : " + 결과);
        }).fail(function(에러){
          //실패시 실행할 코드는 여기
          console("ajax 실패>> " + " 에러 : " + 에러);
        });

      })
</script>

[codingapple]

서버에 bodyParser이런거 셋팅잘해놧나 확인합시다

[xaxa]

+) 위의 본글에 올린 코드에 옮기다가 발생한 오타가 있었네요!
2번째 ajax에 POST 요청으로 되어있는데 POST가 아닌 GET 입니다!

btnCheck에 ajax로 data 보내면 콘솔에 잘 출력되며, TimerPrint만 undefined로 출력됩니다..
1을 int로 바꿔주는 부분을 아직 추가하지 않았는데 1 대신에 문자열로 해도 결과는 동일합니다ㅠㅠ
아래처럼 작성했을 때 제가 보기엔 문제가 없어보이나 혹시 잘못된 부분이 있을까요?

<<server.js>>
//bodyParser
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))

//TimerPrint
app.get('/TimerPrint', function (req, res) {
  if(req.body.isClick == 1){
    console.log("req.body.isClick은 1임 >>>>>>>>>> " + req.body.isClick);
  }
  else { //이 부분이 출력되며 req.body.isClick이 undefined로 출력됩니다..
    console.log("req.body.isClick은 1아님>>>>>>>>>> " + req.body.isClick);		
  }

  if (!req.session.nickname) {	//로그인X
    res.render('TimerPrint.ejs', { session: "true", 시간 : time, 분 : min, 초 : sec, 클릭여부 : req.body.isClick});
  }
  else {			//로그인O
    res.render('TimerPrint.ejs', { session: "false", 시간 : time, 분 : min, 초 : sec, 클릭여부 : req.body.isClick});
  }
})

//btnCheck
app.post('/btncheck', function(req, res) {
  console.log("TimerBtn 버튼 클릭 -> 타이머 실행")
  StartTimer();
})

[codingapple]

post요청만 서버로 req.body 데이터를 보낼 수 있습니다

[xaxa]

아... 그래서 undefined가 나왔군요.. 혹시 get요청 ajax로 data 보내서 서버에서 받는 방법 없을까요?

[xaxa]

해당 문제 해결하였습니다!!!
get ajax를 사용하고자 했던 흐름을 계속 생각하다가..
/TimerBtn에서 get ajax로 data 받아오는 대신에,
서버의 StartTimer() 실행 여부에 따른 변수를 받아오는 것으로 변경해보았습니다.

<<흐름>>
1) TimerBtn.ejs에서 '시작버튼'을 누르면 /btnCheck에서 StartTimer() 실행
2) let isClick을 만들어서 StartTimer()가 실행되면 isClick=1이 됨
3) /TimerPrint에 get요청할 때 {클릭여부:isClick}으로 render해서 사용

get ajax에만 매달려 있었는데 다르게 생각해볼 수 있었네요.
조언해주신 부분 감사합니다!

[글쓴이]

글