如何在html中使用ajax方法从节点服务器获取响应

Posted

技术标签:

【中文标题】如何在html中使用ajax方法从节点服务器获取响应【英文标题】:how to get response from node server using ajax method in html 【发布时间】:2016-01-26 11:04:33 【问题描述】:

如果我使用 post 方法,我将在 html 页面中使用 ajax 函数将表单数据发送到 node.js 服务器,我无法在控制台和警报框中看到任何内容。

如果我在 ajax 和 app.js 文件中使用 get 方法,我会收到警报,但我在 app.js 服务器的控制台中没有任何消息

app.js

var express = require('express')
, routes = require('./routes')
, manage = require('./routes/user')
, http = require('http')
, path = require('path');

var app = express();
app.post('/filter', routes.filter);
http.createServer(app).listen(app.get('port'), "172.29.59.65", function()
console.log('Express server listening on port ' + app.get('port'));
);

index.js

exports.filter = function(req, res)

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

client.html

<html>
<head>
<script>
function myFunction()  

var region=document.getElementById("region").value;
var os=document.getElementById("os").value;
alert(region+os);
var data = ;
 data.region = region;
 data.os = os;
 $.ajax(
 type: 'POST',
 jsonpCallback: "callback",
 datatype: 'jsonp',
 data: JSON.stringify(data),
 //contentType: 'application/json',
 url: 'http://172.29.59.65:3000/filter',
 success: function(data) 
   alert(data);
   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>

我的问题是将数据发送到节点服务器并从节点服务器接收数据到 html 页面如何实现这一点。请帮我解决这个问题。

【问题讨论】:

【参考方案1】:

您需要一个中间件来解析正文的帖子数据。你可以试试bodyParser。首先,你应该安装它:

$ npm install body-parser

然后只需要并使用它:

var express = require('express')
, bodyParser = require('body-parser')
, routes = require('./routes')
, manage = require('./routes/user')
, http = require('http')
, path = require('path');

var app = express();
app.use(bodyParser.urlencoded( extended: false ));
app.post('/filter', routes.filter);
http.createServer(app).listen(app.get('port'), "172.29.59.65", function()
console.log('Express server listening on port ' + app.get('port'));
);

现在您的POST 参数将存储在req.body 中。

exports.filter = function(req, res)
    console.log("Received body data", req.body);
    res.writeHead(200, "OK", 'Content-Type': 'text/html');
    res.end("hello");
 )    
;

【讨论】:

我已经尝试过但无法再次工作“失败”消息以及名为“未捕获的异常:内存不足”的错误 我又错过了一个时刻,使用 req.body 而不是块,我会在一分钟内更新我的答案。

以上是关于如何在html中使用ajax方法从节点服务器获取响应的主要内容,如果未能解决你的问题,请参考以下文章

在 JS 中如何使用 Ajax 来进行请求

如何使用Ajax从FastReport Web API获取报表

如何从MVC5中的jquery ajax调用中获取部分视图和JSON数据?

如何获取ajax responseXML内容

将 Ajax 响应分配给 php 变量

如何通过ajax fetch api响应将从laravel控制器接收到的数据发送到另一个页面