Node.js通过AJAX发送数据到后端
我对AJAX相当陌生,所以很抱歉有可能发生错误理解,但我并没有完全通过这件事。Node.js通过AJAX发送数据到后端
我正在尝试一件简单的事情。我有一个server.js
文件,这基本上是我的后端。然后我有一个index.html
和一个script.js
。这就是全部,所以非常基本的设置。现在,在我的script.js
上,我收到一些数据(邮件地址)。现在我想将这些数据发送到我的后端(进入server.js
)以在那里使用它。我怎样才能做到这一点?
我发现一些关于AJAX和node.js的文章,但我不明白,特别是没有在我的后端接收它的地方。顺便说一下,我使用快递服务器。
我在我的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'));
感谢所有帮助:)
注:这是问题是用代码更新之前写这样的字段名和端口号I U sed这里作为例子可能需要用正确的值更新。
客户端代码 - 例如与jQuery:
$.post('/email', { address: '[email protected]' });
(这可能需要任选的回调并将其返回可用于添加成功/错误处理程序一个承诺)
服务器 - 端代码 - 例如与快递:
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)是在public
目录相对于您的server.js
文件。
有关JSON /形式编码问题的背景显示方式:
看到这个背景上提供静态文件:
这实际上相当简单与基本路由器Express.JS来实现:
我我会给你一些缩小的代码片段,以帮助你理解它在浏览器和服务器上的工作原理。
在前端,你基本上只是想“邮报”的电子邮件地址到后端:
$.post('/email', { email: '[email protected]' })
和后端(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
})
在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)
}
});
你需要一些更多的东西居然能解析身体。将此添加到您的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!");
})
首先,你需要一个有效的路由服务器运行时命中。您可以通过快递在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
对象req.body
下。您将需要安装此依赖关系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)
}
});
,如果您提交的电子邮件时,你会看到一个登录终端,显示电子邮件和日志在浏览器的开发者控制台,显示消息“我的电子邮件!”
首先你NEDD创建一个路由邮件的
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)
}
});
你能分享你做了什么? –
@GhanshyamSingh当然,编辑与我的'server.js'代码 – nameless
把代码server.js –