인프런 커뮤니티 질문&답변

pykoook님의 프로필 이미지
pykoook

작성한 질문수

Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해

JSON 활용한 Ajax처리

Ajaxsend버튼 실행시 에러_해당 소스추가로 올립니다.

해결된 질문

작성

·

215

1

[소스명 : form.html]

<!doctype html>

<html>

  <head>

      <meta charset="utf-8">

      <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="result"></div>

    <script>

      document.querySelector('.ajaxsend').addEventListener('click',function() {

        var inputdata = document.forms[0].elements[0].value;

        sendAjax('http://127.0.0.1:3000/ajax_send_email', inputdata);

      })

      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);

        xhr.addEventListener('load', function() {

          console.log(xhr.responseText);

      //  var result = xhr.responseText;

          var result = JSON.parse(xhr.responseText);

      // document.querySelector(".result").innerHTML="dsfds";

          if(result.result !== "ok") return;

          document.querySelector(".result").innerHTML=result.email;

        });

      }

    </script>

  </body>

</html>

================

[소스명 : app.js]

var express = require('express')

var app = express()

var bodyParser = require('body-parser')

var cors = require('cors')

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')

app.use(cors())

//url routing

app.get('/', function(req,res) {

  console.log('test');

  res.sendFile(__dirname+"/public/main.html")

});

app.get('/main', function(req,res) {

  res.sendFile(__dirname+"/public/main.html")

})

app.post('/email_post', function(req,res) {

  console.log(req.body.email)

//  res.send("post response")

//res.send("<h1>welcome " + req.body.email + "</h1>")

res.render('email.ejs', {'email' : req.body.email})

})

app.post('/ajax_send_email', function(req, res) {

console.log(req.body.email)

var responsData = {'result' : 'ok', 'email' : req.body.email};

res.json(responseData);

})

=================

[커멘트창에서 에러화면입니다]

pykoook@naver.com

ReferenceError: responseData is not defined

    at C:\users\kosmo\server-side-script\app.js:37:11

    at Layer.handle [as handle_request] (C:\users\kosmo\server-side-script\node_modules\express\lib\router\layer.js:95:5)

    at next (C:\users\kosmo\server-side-script\node_modules\express\lib\router\route.js:137:13)

    at Route.dispatch (C:\users\kosmo\server-side-script\node_modules\express\lib\router\route.js:112:3)

    at Layer.handle [as handle_request] (C:\users\kosmo\server-side-script\node_modules\express\lib\router\layer.js:95:5)

    at C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:281:22

    at Function.process_params (C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:335:12)

    at next (C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:275:10)

    at cors (C:\users\kosmo\server-side-script\node_modules\cors\lib\index.js:188:7)

    at C:\users\kosmo\server-side-script\node_modules\cors\lib\index.js:224:17

pykoook@naver.com

ReferenceError: responseData is not defined

    at C:\users\kosmo\server-side-script\app.js:37:11

    at Layer.handle [as handle_request] (C:\users\kosmo\server-side-script\node_modules\express\lib\router\layer.js:95:5)

    at next (C:\users\kosmo\server-side-script\node_modules\express\lib\router\route.js:137:13)

    at Route.dispatch (C:\users\kosmo\server-side-script\node_modules\express\lib\router\route.js:112:3)

    at Layer.handle [as handle_request] (C:\users\kosmo\server-side-script\node_modules\express\lib\router\layer.js:95:5)

    at C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:281:22

    at Function.process_params (C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:335:12)

    at next (C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:275:10)

    at cors (C:\users\kosmo\server-side-script\node_modules\cors\lib\index.js:188:7)

    at C:\users\kosmo\server-side-script\node_modules\cors\lib\index.js:224:17

pykoook@naver.com

ReferenceError: responseData is not defined

    at C:\users\kosmo\server-side-script\app.js:37:11

    at Layer.handle [as handle_request] (C:\users\kosmo\server-side-script\node_modules\express\lib\router\layer.js:95:5)

    at next (C:\users\kosmo\server-side-script\node_modules\express\lib\router\route.js:137:13)

    at Route.dispatch (C:\users\kosmo\server-side-script\node_modules\express\lib\router\route.js:112:3)

    at Layer.handle [as handle_request] (C:\users\kosmo\server-side-script\node_modules\express\lib\router\layer.js:95:5)

    at C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:281:22

    at Function.process_params (C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:335:12)

    at next (C:\users\kosmo\server-side-script\node_modules\express\lib\router\index.js:275:10)

    at cors (C:\users\kosmo\server-side-script\node_modules\cors\lib\index.js:188:7)

    at C:\users\kosmo\server-side-script\node_modules\cors\lib\index.js:224:17

답변 1

0

pykoook님의 프로필 이미지
pykoook
질문자

소스 오타로 정정하여 모두 해결되었습니다.

감사합니다.

pykoook님의 프로필 이미지
pykoook

작성한 질문수

질문하기