2013-04-17 106 views
1

我有一個真正的困難時刻站起來從html頁面到我的node.js應用程序的雙向數據傳輸,然後返回到html頁面。來自express js的Ajax post響應一直拋出錯誤

我很確定我全部都是正確的解決方案,但我只是沒有得到它的工作。

我用我的Node.js應用程式如下:

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

所以,當我運行的節點應用程序,服務器自帶很好。當我啓動html頁面時,我收到警報「到了這裏!」當我按下「NameGameIt」按鈕時,我收到警報「現在怎麼樣?」然後是提示「名稱:」+我輸入的任何名稱。一旦我點擊該警報,節點應用程序立即看到帖子並將名稱打印到控制檯。兩秒鐘後,當節點發送響應時,瀏覽器將直接進入ajax文章的錯誤處理程序。在錯誤處理程序中出現的唯一有用的數據是它是一個「錯誤」,它並不真正有用。

所以我知道消息從html頁面進入節點,因爲它打印出我發送的名稱,並且我知道html頁面從節點獲取消息,因爲它不會錯誤地出現,直到節點上的超時發生觸發發送。但是,我不知道爲什麼它一直把我送到錯誤處理程序而不是成功。我已經使用node-inspector在節點代碼中一路走過了,它似乎正在用200代碼正確地構建數據包,並且在完成數據包之後調用.end inside .send,因此我不會想想那些事情都在咬我。

我快要瘋了!如果有人看到我錯過了什麼,或者有什麼新的想法來收集更多信息,我將非常感謝幫助。

+0

你可以訪問瀏覽器控制檯由於拒絕同源策略? –

+0

@Kevin B瀏覽器控制檯根本沒有顯示任何類型的消息,只是關於我的HTML文檔字符編碼的警告消息沒有聲明。 。 。我認爲我很安全忽略 – Brian

回答

2

您的代碼非常好,但您幾乎肯定會遇到跨域AJAX請求問題。您可能會在本地文件系統上打開這個HTML文件,並以這種方式發出請求,這就是導致此問題的原因。

爲了解決這個問題,添加app.use(express.static('public'));像這樣:

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文件中的 '公共' 文件夾中。一旦啓動服務器,您可以訪問http://127.0.0.1:8088/file.html,您的代碼將正常運行。

+0

非常感謝您指引我朝着正確的方向發展。我的罪過很好,我只是在瀏覽器中直接在我的文件系統中運行html。此外,我剛從頭創建了我的節點應用程序,所以不使用快速工具。 。 。我回過頭來使用命令'express -s -e expressTest'創建了我的節點應用程序,它爲我所指的創建了公共文件夾。一旦我把我的HTML在那裏,並把我的職位處理程序在應用程序中。它創造出來的一切都像魔術般運作。非常感謝幫忙。 – Brian

+0

對任何有類似問題的人來說,我會推薦檢查faye並查看它是否可能滿足節點和網頁通信需求。我今天發現它,到目前爲止我已經取得了非常好的成績。發佈/訂閱對我來說是一個熟悉的範例,我保持我的手指交叉,我沒有找到任何gothcas,因爲到目前爲止,我真的很喜歡它。 – Brian

1

在我的情況下,將此添加到app.js作品。

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