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

关键词：

【中文标题】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: 'xxx@example.com' );

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

服务器端代码 - 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: '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

【讨论】：

然后我可以在我的 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)
            
        );

【讨论】：

如何使用 jquery 将数据从本地存储发送到后端

】如何使用jquery将数据从本地存储发送到后端【英文标题】：Howtosenddatafromlocalstoragetobackendwithjquery【发布时间】：2018-06-1503:13:05【问题描述】：如何使用jquery从localstorage发送jsonwebtoken到节点服务器。我试图用这种方式做到这一点... 查看详情

如何通过ajax请求将输入日期值从模板发送到后端 - django

】如何通过ajax请求将输入日期值从模板发送到后端-django【英文标题】：howtosendinputdatevaluefromtemplatetobackendthroughajaxrequest-django【发布时间】：2022-01-1712:00:33【问题描述】：我必须基于两个日期进行查询，如果日期存在，如果不只... 查看详情

如何使用 websockets 将消息发送到后端

】如何使用websockets将消息发送到后端【英文标题】：HowcanIsendmymessageusingwebsocketstobackend【发布时间】：2017-07-2911:26:35【问题描述】：我正在尝试使用PostgreSQL数据库在Django后端和Angular4前端之间创建实时聊天。假设我想创建聊天机... 查看详情

axios 不会将 post 数据发送到后端

...手，我的问题是我要向我的节点后端发出一个发布请求。使用react-redux和axios。问题是我的后端甚至没有达到请求。并且在浏览器以太网中的网络选项卡上没有任何操作我尝试了很多其他答案，但都不起作用此代码在我的redux操作... 查看详情

vscode打包的dist文件怎么整合到后端代码中

...准备工作。首先，您需要在VSCode中安装Node.js，以便可以使用npm工具来安装所需的依赖项。其次，您需要在VSCode中安装Webpack，以便可以将dist文件打包成一个单独的文件。最后，您需要将打包的文件上传到后端代码中，以便可以在... 查看详情

如何通过 ajax 调用将 html 表单数据发送到 node.js 服务器？

...ajaxcall?【发布时间】：2016-01-0221:50:09【问题描述】：我想使用Ajax将表单数据发送到node.js服务器，我正在采用以下方法来发送数据。我不知道如何在node.js服务器程序中接收它我没有使用node.js的express框架clien 查看详情

ionic2 将对象数据发送到后端

】ionic2将对象数据发送到后端【英文标题】：ionic2SendingobjectdatatoBackand【发布时间】：2017-04-0921:54:52【问题描述】：我创建了一个ionic2注册页面。在注册页面上，我创建了一个下拉菜单，用户可以在其中选择他们的血型。我正在... 查看详情

将 JSON 从 angular.js 发送到 node.js

...一个错误：TypeError:Cannotreadpropertyusernameofundefined。我也在使用Express。前端(Angular.js)：varu 查看详情

实现前端table中checkbox全选功能，并将选中的数据发送到后端

...情况下点击，会将下面所有选中的checkbox取消；2.当下面使用submit的提交按钮时，会将所有checkbox选中的数据提交给后端； 二、实现1、实现全选checkbox功能技术分析：其实这里可以使用js活着jquery两种方式，我暂时使用的是js... 查看详情

如何将 iso 8601 日期发送到后端？

...没有任何内容。请求发送成功，因为除了Date之外的所有数据都到了后端。这是需要在后端的："date":"2021-12-17T17:52:27.724773",这是我尝试过的：letisoD 查看详情

前端发送数据到后端

请问前端具体是怎么发送数据给后端的，可以给一点简单的代码吗，谢啦前段发送数据到后端有两种方式post和get方式：$.ajax(    type:"post",    url:"api.php",    dataType:"jso... 查看详情

如何将 JQuery AJAX 请求中的数据发送到 Node.js 服务器

...时间】：2012-11-0819:56:14【问题描述】：我想做什么：只需使用jqueryajax请求将一些数据（例如json）发送到node.jshttp服务器。由于某种原因，我无法在服务器上获取数据，因为它永远不会触发请求的“数据”事件。客户端代码：$ 查看详情

vue如何将文件发送到后端

...附件添加到对象并将其发送到服务器？因为在服务器端和数据库中我需要知道哪个文件属于哪个人？【问题 查看详情

Node.js, Ajax 发送和接收 Json

...ndreceivingJson【发布时间】：2014-07-1004:18:59【问题描述】：使用Ajax，我试图将Json数据发送到节点服务器，不涉及任何处理，只是在发送时发出警报并在收到时发出警报：这是我的html5：带有onclick功能的简单按钮来触发使用ajax调用... 查看详情

如何使用 Node.js 将 JSON 数据从 Node.js 发送和获取到 HTML

】如何使用Node.js将JSON数据从Node.js发送和获取到HTML【英文标题】：HowtosendandgetJSONdatafromNode.jsintoHTMLusingNode.js【发布时间】：2018-01-0900:49:14【问题描述】：我目前正在尝试建立简单的在线论坛，人们可以在其中发布cmets；但是，我... 查看详情

从 node.js 发送结果以做出反应

】从node.js发送结果以做出反应【英文标题】：sendingresultsfromnode.jstoreact【发布时间】：2021-10-2416:02:42【问题描述】：所以在我的listPage上，我有2个文档，我希望能够在其中单击edit按钮，然后它会将我带到editPage。它现在确实这样... 查看详情

将相关数据添加到后端 api

】将相关数据添加到后端api【英文标题】：addingrelateddatatobackandapi【发布时间】：2016-06-0707:04:47【问题描述】：我有一个包含几个不同对象的数据库设置。例如，假设我有一个名为“kids”的对象和一个名为“toys”的相关对象。To... 查看详情

简单的烧瓶应用服务器使用 ajax 和 jquery 传递数据

】简单的烧瓶应用服务器使用ajax和jquery传递数据【英文标题】：simpleflaskappserverpassingdatawithajaxandjquery【发布时间】：2019-01-2513:10:30【问题描述】：我整天都在修补这个应用程序，试图将一些简单的信息传递到应用程序的后端。... 查看详情