Node.js使用AJAX将数据发送到后端

我对AJAX很陌生，对于潜在的误解感到遗憾，但我并没有完全理解这件事。

我正在尝试一件简单的事情。 我有一个server.js文件，基本上是我的后端。 然后我有一个index.html和一个script.js 。 这就是全部，所以这是一个非常基本的设置。 现在，在我的script.js ，我得到了一些数据（邮件地址）。 现在我想将数据发送到我的后端（进入server.js ）以便在那里使用它。 我怎样才能做到这一点？

我在node.js上找到了一些关于AJAX的post，但是我没有得到它，特别是在后端接收它的地方。 顺便说一句，我正在为服务器使用express。

我在script.js是：

 $.ajax({ type: "POST", url: "server.js", data: { mail: mail }, success: function(data) { }, error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) } }); 

到目前为止？ 我现在如何在server.js收到信息？

到目前为止没有多少，只是：

 var express = require('express'); var app = express(); var server = app.listen(3000); app.use(express.static('public')); 

谢谢你的帮助 ：）

Answer 1

注意：这是在使用代码更新问题之前编写的，因此我在此处使用的字段名称和端口号可能需要使用正确的值进行更新。

客户端代码 – 使用jQuery的示例：

 $.post('/email', { address: '[e-mail]' }); 

（这可以采用可选的回调，并返回一个可用于添加成功/error handling程序的promise）

服务器端代码 – 使用Express的示例：

 const express = require('express'); const bodyParser = require('body-parser'); const dir = path.join(__dirname, 'public'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post('/email', (req, res) => { // you have address available in req.body: console.log(req.body.address); // always send a response: res.json({ ok: true }); }); app.use(express.static(dir)); app.listen(4443, () => console.log('Listening on http://localhost:4443/')); 

这假设您的静态文件（HTML，客户端JavaScript，CSS）位于相对于server.js文件的public目录中。

有关JSON /表单编码问题的背景信息，请参阅此处：

• 构建API时更喜欢哪种方法

有关提供静态文件的背景信息，请参阅此

• 如何使用nodejs提供图像

Answer 2

实际上，使用基本路由器在Express.JS中实现起来非常简单：

我将为您提供缩小的代码片段，以帮助您了解它在浏览器和服务器上的工作方式。

在前端，你基本上只想在后端“发布”一个电子邮件地址：

 $.post('/email', { email: '[e-mail]' }) 

在后端（Express.JS）中，您应该实现基本路由器：

 var express = require('express'); var app = express(); // use: app.METHOD(PATH, HANDLER) app.post('/email/', function(req, res) { var email = req.body.email }) 

点击此处了解更多信息： http ： //expressjs.com/en/guide/routing.html

Answer 3

在server.js中添加：

 app.post('/searching', function(req, res){ //do something with req }); 

并在script.js中：

 $.ajax({ type: "POST", url: "/searching", data: { mail: mail }, success: function(data) { }, error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) } }); 

Answer 4

首先，在服务器运行时需要一个有效的路由。 您可以通过express在server.js执行此操作。

 var express = require('express'); var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.json()); app.use(express.static('public')); app.post('/mail', function(req, res) { var body = req.body; console.log('email', body.email); res.json({ message: 'I got the email!' }); }); var server = app.listen(3000); 

请注意，我引入了一个快速中间件，它将解析JSON的正文并使其在req.body下的req对象上req.body 。 您需要使用npm install --save body-parser安装此依赖npm install --save body-parser 。

然后，您需要从前端向该URL发送POST请求。

 $.ajax({ type: "POST", url: "/mail", data: { mail: mail }, success: function(data) { console.log('message', data.message); }, error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) } }); 

现在，如果您提交电子邮件，您应该会在终端中看到一条日志，其中显示电子邮件，并在浏览器中显示开发人员控制台中的日志，其中显示消息“我收到了电子邮件！”

Answer 5

首先，您需要为Mail创建路由

 var express = require('express'); var path = require('path'); var bodyParser = require('body-parser'); var app = express(); var router=app.Router(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug'); //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); // Parse request body app.use(express.static(path.join(__dirname, 'public'))); // Route to check Email router.post('/CheckEmail',(req,res)=>{ var email=req.body.mail; // Get email here }) app.listen(process.env.port || 3000,()=>{ console.log('server is running'); }) 

阿贾克斯

 $.ajax({ type: "POST", url: "/CheckEmail", // post route name here data: { mail: mail }, success: function(data) { }, error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) } }); 

Answer 6

你需要更多的东西来实际解析身体。 将其添加到server.js文件中。

 var bodyParser = require('body-parser'); var cookieParser = require('cookie-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); 

您需要指定有效的URL。 由于您正在侦听3000.您还需要在服务器上指定路由作为端点。

 $.ajax({ type: "POST", url: "http:localhost:3000/", data: { mail: mail }, success: function(data) { }, error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) } }); 

现在，您需要在服务器上添加路由。 您可以在所有app.use调用之后将其添加到server.js文件中

 app.post("/", function(req, res){ // your logic here res.send("I am sending something back!"); })