如何使用 ajax 从 javascript 中的 node.js 获取响应？答案

【问题标题】：how to get response from node.js in javascript by using ajax?如何使用 ajax 从 javascript 中的 node.js 获取响应？
【发布时间】：2016-01-25 08:26:02
【问题描述】：

screen shot of network panel

screen shot of console panel

我想通过使用 ajax 函数将表单详细信息发送到 node.js 服务器，我可以在控制台中看到我发送的任何内容

但我无法从 node.js 服务器获得任何对 html ajax 函数的响应

server.js

var http = require('http');
http.createServer(function(request, response) {     
request.on('data', function (chunk) {   
    var res=chunk.toString('utf8');
    var obj=JSON.parse(res);
    var region=obj.region;
    var os=obj.os;              
    console.log(region);
    console.log(os);    
}); 
//var data="hi";
//how to send data
//response.send(data);
}).listen(8088);

client.html

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function myFunction() { 
var region = document.getElementById("region").value;
var os = document.getElementById("os").value;  
var data = {};
data.region = region;
data.os = os;
$.ajax({
 type: 'POST',
 jsonpCallback: "callback",
 datatype: 'jsonp',
 data: JSON.stringify(data),
 //contentType: 'application/json',
 url: 'http://127.0.0.1:8088/', //node.js server is running
 success: function(data) {
   alert("success");
   console.log(JSON.stringify(data));
 },
 error: function (xhr, status, error){
    console.log('Failure');
    alert("failure");
    },
 });
}
</script>
</head>
<body>
<form>
<input type="text" id="region" name="region"/>
<input type="text" id="os" name="os"/>
<input type="button" value="search" class="fil_search" onclick="myFunction()"/>
</form>
</body>
</html>

帮助我解决如何从 node.js 服务器获取响应。只是我想在 html 页面中看到成功消息的警报框

【问题讨论】：

在您的开发者工具中添加来自Network 面板的屏幕截图。
我无法将屏幕截图附加到此评论，但我收到“警告框中的失败消息”和控制台面板中出现的休闲错误“XMLHttpRequest cannot load 127.0.0.1:8088.No 'Access-请求的资源上存在 Control-Allow-Origin 标头。因此，不允许访问 Origin 'null'。我收到此错误
将屏幕截图附加到原始帖子。你要不要帮助？如果你这样做了，你至少不能试着为人们提供帮助你的信息吗？我认为这是您至少可以做的。
我附上了网络面板和控制台面板的屏幕截图，请检查并给我解决方案
干得好，我现在知道是什么导致了您的问题。您必须点击我给您的链接之一 - 目前，XHR 无法使用您的 html 和服务器。

标签： javascript jquery html ajax node.js

【解决方案1】：

您应该添加 request.on('end') 事件，该事件将在收到所有数据并完成 http 请求时触发：

数据： 每当正文数据在 TCP 套接字级别进入时触发。请注意，这不一定包含所有数据，因此称为块。

end: 在 HTTP 请求完成时触发。这表明与它关联的所有正文数据都已读取，并且已触发相应的数据事件。

var http = require('http');

http.createServer(function(request, response) {     
  request.on('data', function (chunk) {  
    console.log("Received body data", chunk.toString());
    // chunk is received, process it as you need
  }); 
  request.on('end', function() {
    // http request is competed, send response to client
    response.writeHead(200, "OK", {'Content-Type': 'text/html'});
    response.end();
  })
}).listen(8088);

【讨论】：

我仍然无法获得任何成功警报
如果我使用 get 方法，我能够提醒成功消息，但如果我使用 post 方法，我无法在控制台中看到数据，我收到错误为 404 错误
您是否进行了 Tomáš Zato 建议的任何更改（与 CORS 相关）？

【解决方案2】：

发生这种情况的原因是您正在从 file:// 协议加载127.0.0.1:8088。对于浏览器来说，这是一个不安全的可疑操作，为了保护您，它不允许这样做。

你现在有两个选择：

Enable CORS on your node.js - 让 node.js 服务器告诉您的浏览器可以加载来自不同域的请求。
Serve your client2.html from Node.js - 您应该从节点 js 获取 client2.html 而不是 file://，就像从任何其他网络服务器一样 - 使用 URL 路径：127.0.0.1:8088/client2.html。

我提供的链接包含您的问题的解决方案，即CORS error。没有正确配置你的 Node.js 脚本就没有解决方案。

【讨论】：