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

Posted 2023-03-07

【中文标题】Node.js 使用 AJAX 将数据发送到后端

【英文标题】：Node.js send data to backend with AJAX

【发布时间】：2017-12-19 17:36:07

【问题描述】：

我对 AJAX 还很陌生，对于潜在的误解，我深表歉意，但我还没有完全理解那件事。

我正在尝试一件简单的事情。我有一个server.js 文件，基本上是我的后端。然后我有一个index.html 和一个script.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'));

感谢您的帮助:)

【问题讨论】：

你能分享一下你做了什么吗？

@GhanshyamSingh 当然，用我的server.js中的代码编辑

放上server.js的代码

请将url 中的url 部分替换为ajax url 必须是有效路由

@Mostafa 做到了

【参考方案1】：

你需要更多的东西才能真正解析身体。将此添加到您的 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!");

)

【参考方案2】：

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

客户端代码 - jQuery 示例：

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

（这可以接受可选的回调并返回一个可用于添加成功/错误处理程序的承诺）

服务器端代码 - 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/表单编码问题的背景信息，请参阅此内容：

Which method is prefer when building API

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

How to serve an image using nodejs

【参考方案3】：

首先你需要为邮件创建一个路由

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

【参考方案4】：

首先，您需要在服务器运行时命中的有效路由。您可以通过快递在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 对象上可用。您需要使用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)
    
);

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

【参考方案5】：

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

我会给你一个缩小的代码 sn-ps 来帮助你了解它是如何跨浏览器和服务器工作的。

在前端，您基本上只是想将电子邮件地址“发布”到后端：

$.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

【讨论】：

然后我可以在我的 express 所在的同一个 js 文件中访问 email 变量吗？

@nameless 完全一样，但要确保前端和后端的 url 相同

好的，但不必有像email.js 这样的文件，我可以使用任何我想要的名称，它必须相同？

@nameless 是的，但是如果你的程序越来越大，你可能想要设计一个好的模块化模式来让整个项目更易于管理。例如，用于处理路由问题的文件“route.js”:)

【参考方案6】：

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