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

时间:2017-07-14 14:54:02

标签: javascript jquery node.js ajax express

我对AJAX很陌生,对于潜在的误解感到抱歉,但我并没有完全理解这一点。

我尝试了一件简单的事情。我有一个server.js文件,基本上是我的后端。然后我有index.htmlscript.js。这就是全部,所以这是一个非常基本的设置。现在,在我的script.js上,我获取了一些数据(邮件地址)。现在我想将这些数据发送到我的后端(进入server.js)以便在那里使用它。我怎么能这样做?

我在node.js上发现了一些关于AJAX的帖子,但是我没有得到它,特别是在我的后端没有收到它的地方。顺便说一下,我正在为服务器使用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'));

感谢您的帮助:)

6 个答案:

答案 0 :(得分:3)

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

客户端代码 - 使用jQuery的示例:

$.post('/email', { address: 'xxx@example.com' });

(这可以采用可选的回调,并返回一个可用于添加成功/错误处理程序的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)位于public目录中相对于server.js文件的位置。

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

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

答案 1 :(得分:1)

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

我会给你一些缩小的代码片段,以帮助你了解它在浏览器和服务器上是如何工作的。

在前端

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

$.post('/email', { email: 'howareyou@xx.com' })

在后端(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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

你需要更多的东西来实际解析身体。将其添加到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')));

您需要指定有效的网址。由于您正在侦听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!");

})

答案 4 :(得分:0)

首先,在服务器运行时需要一个有效的路由。您可以在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安装此依赖项。

然后,您需要从前端向该网址发送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)
    }
});

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

答案 5 :(得分:0)

首先,您需要为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

$.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)
            }
        });