2013-04-17 2 views
1

html 페이지에서 내 node.js 애플리케이션으로 양방향 데이터 전송을 시작한 다음 다시 html 페이지로 돌아가는 데 어려움을 겪고 있습니다.Ajax의 응답으로 express js가 계속 오류를 던지고 있습니다

나는 올바른 해결책을 다 가지고 있다고 확신하지만, 제대로 작동하지 않을 것입니다. 나는 내 Node.js를 응용 프로그램에 대해 다음 사용하고

: 나는 노드 응용 프로그램을 실행할 때, 서버가 온다, 그래서

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 

    <script type="text/javascript"> 
     // wait for the DOM to be loaded 
     $(document).ready(function() 
     { 
      alert("Got here!"); 

      function DisplayName(response) 
      { 
       alert(response.newName); 
      } 

      $("#NameGameIt").click(function(event) 
      { 
       alert("How about now?"); 
       //event.PreventDefault(); 
       var nameSubmitted = document.getElementById("name"); 
       //var nameSubmitted = "help!!"; 

       alert("Name: " + nameSubmitted.value); 

       $.ajax({ 
        type:  "POST", 
        url:  "http://127.0.0.1:8088/namegame", 
        data:  {name: nameSubmitted.value}, 
        dataType: "json", 
        timeout: 2500, 
        success: function() { alert("???");}, 
        error:  function(error1, error2, error3) 
        { alert("error"); }, 
        complete: function(arg1, arg2, arg3) 
        { alert("complete"); } 
       }); 

      }); 

     }); 

    </script> 

</head> 
<body> 

<h1>Test form for Ajax</h1> 
</br> 

Name: <input type="text" id="name" name="name"></br> 
<input type="button" value="NameGameIt" id="NameGameIt"> 
</form> 

</body> 
</html> 

:

var express = require('/usr/lib/node_modules/express'); 
var app = express(); 

app.use(function(err, req, res, next){ 
    console.error(err.stack); 
    res.send(500, 'Something broke!'); 
}); 

app.use(express.bodyParser()); 

app.post('/namegame', function(req, res) 
    { 
     console.log('Got request name: ' + req.body.name); 
     setTimeout(function() 
     { 
      var newName = "New Name-O"; 
      res.send({name: newName}); 
     }, 2000); 
    } 
); 

app.listen(8088, function() { console.log("Server is up and running"); }); 

다음은 내 HTML 페이지입니다 괜찮아. html 페이지를 열면 "여기에 있습니다!"라는 경고가 나타납니다. "NameGameIt"버튼을 누르면 "지금은 어떨까요?"라는 경고가 나타납니다. 그 다음에 "Name :"이라는 경고와 내가 입력 한 이름이 나온다. 일단 해당 경고를 클릭하면 노드 응용 프로그램은 즉시 게시물을보고 콘솔에 이름을 인쇄합니다. 2 초 후에 노드가 응답을 보내면 브라우저는 아약스 게시물의 오류 처리기로 바로 이동합니다. 오류 처리기에서 나오는 유일한 유용한 데이터는 "오류"로 실제로 유용하지 않다는 것입니다.

그래서 내가 보낸 이름을 출력하고 HTML 페이지가 노드에서 메시지를 받고 있다는 것을 알기 때문에 메시지가 노드의 HTML 페이지로 전달된다는 것을 알았습니다. 노드에서 시간 초과가 발생하여 전송이 트리거됩니다. 하지만, 왜 성공 대신 오류 처리기로 나를 보냈는지 모르겠다. 노드 검사기를 사용하여 노드 코드에서 모든 단계를 밟았으며 성공을 위해 200 개의 코드로 올바르게 패킷을 작성하는 것으로 보이며 패킷을 완료 한 후에 내부 .end를 호출합니다. 그 중 하나가 나를 물고 있다고 생각합니다.

나는 견과류에 대해 간다! 누구든지 제가 누락 된 부분을 보거나 더 많은 정보를 수집 할 수있는 새로운 아이디어가 있다면 도움에 매우 감사하게 생각합니다.

+0

는 브라우저 콘솔에서 동일 출처 정책으로 인해 거부 된 액세스를받을 수 있나요? –

+0

@Kevin B 브라우저 콘솔에 메시지가 전혀 표시되지 않습니다. HTML 문서의 문자 인코딩에 대한 경고 메시지가 선언되지 않았습니다. . . 나는 내가 무시한다고 생각한다. – Brian

답변

2

코드는 완벽하지만 도메인 간 AJAX 요청 문제가 거의 발생합니다. 로컬 파일 시스템에서이 HTML 파일을 열어이 문제를 일으키는 요청을하는 것일 수 있습니다.

var express = require('/usr/lib/node_modules/express'); 
var app = express(); 

app.use(function(err, req, res, next){ 
    console.error(err.stack); 
    res.send(500, 'Something broke!'); 
}); 

app.use(express.bodyParser()); 
app.use(express.static('public')); 

app.post('/namegame', function(req, res) 
    { 
     console.log('Got request name: ' + req.body.name); 
     setTimeout(function() 
     { 
      var newName = "New Name-O"; 
      res.send({name: newName}); 
     }, 2000); 
    } 
); 

app.listen(8088, function() { console.log("Server is up and running"); }); 

을하고 '공공'폴더에 HTML 파일을 배치 :

과 같이 app.use(express.static('public'));를 추가, 그것을 해결하려면. 서버를 시작하면 http://127.0.0.1:8088/file.html을 방문하면 코드가 올바르게 실행됩니다.

+0

고맙습니다. 올바른 방향으로 나를 가리켜 주셔서 감사합니다. 내 죄는 위대한 것이 었습니다. 저는 제 브라우저에서 html을 직접 파일 시스템에서 직접 실행하고있었습니다. 게다가, 나는 익스프레스 툴을 사용하지 않고 노드 애플리케이션을 처음부터 만들었다. . . 나는 돌아가서 'express -s -e expressTest'명령을 사용하여 노드 응용 프로그램을 만들었습니다.이 명령은 당신이 언급 한 공용 폴더를 만들었습니다. 일단 거기에 내 HTML을 넣어 내 게시물 처리기를 애플 리케이션에 넣어.그것이 창조 된 js는 모두 마술 같이 작동했다. 도와 줘서 고마워. – Brian

+0

비슷한 문제가있는 사람에게 메모를 남기고 faye를 확인하고 노드 및 웹 페이지 통신 요구 사항을 충족하는지 확인하는 것이 좋습니다. 나는 오늘 그것을 발견했고 나는 지금까지 그것으로 아주 좋은 성공을 거두었 다. Publish/subscribe는 나에게 익숙한 패러다임이며, 나는 지금까지 내가 그것을 정말로 좋아하기 때문에 나는 어떤 gothcas도 찾지 못한다. – Brian

1

제 경우에는 에 이것을 추가하십시오.

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 

https://enable-cors.org/server_expressjs.html

관련 문제