Javascript 来自express js的Ajax post响应不断抛出错误_Javascript_Jquery_Ajax_Node.js_Express

Javascript 来自express js的Ajax post响应不断抛出错误

javascript jquery ajax node.js express

Javascript 来自express js的Ajax post响应不断抛出错误,javascript,jquery,ajax,node.js,express,Javascript,Jquery,Ajax,Node.js,Express,我正在进行一次真正的艰难的双向数据传输，从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);

我正在进行一次真正的艰难的双向数据传输，从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>


//等待加载DOM
$（文档）.ready（函数（）
{
警惕（“到了！”）；
函数DisplayName（响应）
{
警报（response.newName）；
}
$（“#NameGameIt”）。单击（函数（事件）
{
警惕（“现在怎么样？”）；
//event.PreventDefault（）；
var nameSubmitted=document.getElementById（“名称”）；
//var namesubmited=“help！！”；
警报（“名称：“+nameSubmitted.value”）；
$.ajax({
类型：“POST”，
url:“http://127.0.0.1:8088/namegame",
数据：{name:namesubmited.value}，
数据类型：“json”，
超时：2500，
成功：函数（）{alert（“？？？”）；}，
错误：函数（错误1、错误2、错误3）
{alert（“error”）；}，
完成：函数（arg1、arg2、arg3）
{alert（“complete”）；}
});
});
});
Ajax测试表单


姓名：

因此，当我运行节点应用程序时，服务器运行正常。当我启动html页面时，我会收到警报“get here！”当我按下按钮“NameGameIt”时，我会收到警报“How about now？”然后是警报“Name:”+我输入的任何名称。单击关闭该警报后，节点应用程序立即看到帖子，并将名称打印到控制台。两秒钟后，当节点发送响应时，浏览器将直接进入ajax post上的错误处理程序。错误处理程序中唯一有用的数据是，它是一个“错误”，而不是真正有用的

因此，我知道消息是从html页面到达节点的，因为它打印出我发送的名称，我知道html页面是从节点返回消息的，因为在节点超时触发发送之前，它不会出错。但是，我不知道为什么它总是将我发送到错误处理程序而不是成功。我已经使用node inspector一路查看了节点代码，它似乎正确地构建了数据包，成功的代码为200，它调用了。在内部结束。在完成数据包制作后发送，所以我认为这两个东西都不会咬到我

我快发疯了！如果有人看到我遗漏的内容或对收集更多信息的方法有任何新想法，我将非常感谢您的帮助。

您的代码非常好，但您几乎肯定会遇到跨域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

您的代码将运行良好。

在我的例子中，将此添加到

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

是否由于浏览器控制台中的同源策略而拒绝访问？@Kevin B浏览器控制台根本没有显示任何类型的消息，只是没有声明有关HTML文档的字符编码的警告消息。我认为我很安全忽略了这么多，因为它为我指明了正确的方向。我的罪恶在这一点上是伟大的，我只是在我的浏览器中运行html直接从我的文件系统，正如你所想。此外，我刚刚从头开始创建了我的节点应用程序，没有使用express工具，所以。我返回并使用命令“express-s-e expressTest”创建了我的节点应用程序，该命令为我创建了您所指的公用文件夹。一旦我将我的html放入其中，并将我的帖子处理程序放入它创建的app.js中，一切都像变魔术一样工作。非常感谢您的帮助。给其他有类似问题的人一个提示，我建议查看faye，看看它是否可以满足节点和网页通信的需要。我今天找到了它，到目前为止我已经取得了很好的成功。发布/订阅对我来说是一个熟悉的范例，我祈祷我没有找到任何gothcas，因为到目前为止我真的很喜欢它。