來自快遞js的Ajax發布響應不斷拋出錯誤

Question

我很難站起來從html頁面到我的node.js應用程序的雙向數據傳輸，然后回到html頁面。

我很確定我已經完成了正確的解決方案，但我只是沒有讓它發揮作用。

我在我的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 .send所以我不會認為這些事情中的任何一個都在咬我。

我快要瘋了！ 如果有人看到我缺少的東西，或者對如何收集更多信息有任何新的想法，我將非常感謝你的幫助。

Answer 1

您的代碼非常好，但您幾乎肯定會遇到跨域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文件放在'public'文件夾中。 啟動服務器后，您可以訪問http://127.0.0.1:8088/file.html ，您的代碼運行正常。

Answer 2

在我的情況下，將此添加到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

來自快遞js的Ajax發布響應不斷拋出錯誤

問題描述

2 個解決方案

解決方案1
2 已采納 2013-04-18 01:05:58

解決方案2
1 2017-09-02 15:55:20

來自快遞js的Ajax發布響應不斷拋出錯誤

問題描述

2 個解決方案

解決方案1 2 已采納 2013-04-18 01:05:58

解決方案2 1 2017-09-02 15:55:20

解決方案1
2 已采納 2013-04-18 01:05:58

解決方案2
1 2017-09-02 15:55:20