javascript - 如何在 node.js 中处理 POST 请求-6ren

javascript - 如何在 node.js 中处理 POST 请求

转载作者：IT老高更新时间：2023-10-28 21:53:51

我正在尝试处理发送到我的 node.js 服务器的 post 请求。
名称为 server.js 的 JavaScript 文件在浏览器上显示一个表单。我想在表单值发布到 node.js 后端后访问它们。

该表单包含用户名、存储库和分支。提交表单后，我想将此数据显示回给用户。

server.js 代码:

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end('<html><body>'
    + '<h1>XYZ Repository Commit Monitor</h1>'
    + '<form method="post" action="." enctype="application/x-www-form-urlencoded"><fieldset>'
    + '<div><label for="UserName">User Name:</label><input type="text" id="UserName" name="UserName" /></div>'
    + '<div><label for="Repository">Repository:</label><input type="text" id="Repository" name="Repository" /></div>'
    + '<div><label for="Branch">Branch:</label><input type="text" id="Branch" name="Branch" value="master" /></div>'
    + '<div><input id="ListCommits" type="submit" value="List Commits" /></div>'
    + '</fieldset></form>'
    + '</body></html>');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

最佳答案

我将使用您提供的代码，并提供比您的问题中涵盖的内容更彻底的答案，以适应遥远的 future 中的人们。我还将提供一个使用“Vanilla JS”( http://www.vanilla-js.com/ )的答案，因为我认为当您尝试了解其工作原理时，有太多潮人会说“使用框架”。我认为他们这样做的原因是因为有人告诉他们在学习如何工作时“使用框架”。因为他们不是黑客，他们不在乎尝试和理解这个过程，所以很多时候他们中的许多人不知道如何在没有框架的情况下自己做到这一点(因此无处不在的“使用框架”)。通过了解幕后发生的事情，您将成为一名更好的黑客，我希望这个答案在这方面对您有所帮助。

既然您希望通过您输出的表单接受 POST(表单)数据，则有必要在您的服务器中提供路由机制。这意味着您将告诉您的服务器将表单提供给访问您站点的人，但是如果用户提交表单，Node 会将 POST 数据路由到一个小处理函数。我首先提供了完整的答案，然后进一步剖析，以适应想要从代码中学习的人。

var http = require('http');
var qs = require('querystring');
var formOutput = '<html><body>'
  + '<h1>XYZ Repository Commit Monitor</h1>'
  + '<form method="post" action="inbound" enctype="application/x-www-form-urlencoded"><fieldset>'
  + '<div><label for="UserName">User Name:</label><input type="text" id="UserName" name="UserName" /></div>'
  + '<div><label for="Repository">Repository:</label><input type="text" id="Repository" name="Repository" /></div>'
  + '<div><label for="Branch">Branch:</label><input type="text" id="Branch" name="Branch" value="master" /></div>'
  + '<div><input id="ListCommits" type="submit" value="List Commits" /></div></fieldset></form></body></html>';
var serverPort = 8124;
http.createServer(function (request, response) {
  if(request.method === "GET") {
    if (request.url === "/favicon.ico") {
      response.writeHead(404, {'Content-Type': 'text/html'});
      response.write('<!doctype html><html><head><title>404</title></head><body>404: Resource Not Found</body></html>');
      response.end();
    } else {
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.end(formOutput);
    }
  } else if(request.method === "POST") {
    if (request.url === "/inbound") {
      var requestBody = '';
      request.on('data', function(data) {
        requestBody += data;
        if(requestBody.length > 1e7) {
          response.writeHead(413, 'Request Entity Too Large', {'Content-Type': 'text/html'});
          response.end('<!doctype html><html><head><title>413</title></head><body>413: Request Entity Too Large</body></html>');
        }
      });
      request.on('end', function() {
        var formData = qs.parse(requestBody);
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write('<!doctype html><html><head><title>response</title></head><body>');
        response.write('Thanks for the data!<br />User Name: '+formData.UserName);
        response.write('<br />Repository Name: '+formData.Repository);
        response.write('<br />Branch: '+formData.Branch);
        response.end('</body></html>');
      });
    } else {
      response.writeHead(404, 'Resource Not Found', {'Content-Type': 'text/html'});
      response.end('<!doctype html><html><head><title>404</title></head><body>404: Resource Not Found</body></html>');
    }
  } else {
    response.writeHead(405, 'Method Not Supported', {'Content-Type': 'text/html'});
    return response.end('<!doctype html><html><head><title>405</title></head><body>405: Method Not Supported</body></html>');
  }
}).listen(serverPort);
console.log('Server running at localhost:'+serverPort);

现在来解释为什么我做了我所做的事情。

var http = require('http');
var qs = require('querystring');

首先，您将添加 Node 的内置“querystring”模块来解析实际的表单数据。

var formOutput = '<html><body>'
  + '<h1>XYZ Repository Commit Monitor</h1>'
  + '<form method="post" action="/inbound" enctype="application/x-www-form-urlencoded"><fieldset>'
  + '<div><label for="UserName">User Name:</label><input type="text" id="UserName" name="UserName" /></div>'
  + '<div><label for="Repository">Repository:</label><input type="text" id="Repository" name="Repository" /></div>'
  + '<div><label for="Branch">Branch:</label><input type="text" id="Branch" name="Branch" value="master" /></div>'
  + '<div><input id="ListCommits" type="submit" value="List Commits" /></div></fieldset></form></body></html>';
var serverPort = 8124;

我已经将表单输出移到我们的服务器/路由/表单处理机制之上，因为这样逻辑更容易阅读。我还将服务器监听端口信息移到了此处，因为您只需在一处更改它，而不是在下面的许多处更改。

http.createServer(function (request, response) {

(我通常将这个函数的参数缩短为“req”和“res”，但这只是我的偏好。)

  if(request.method === "GET") {
    if (request.url === "/favicon.ico") {
      response.writeHead(404, {'Content-Type': 'text/html'});
      response.write(notFound);
      response.end();

这里我包含了一个简单的路由示例。在这种情况下，我们让我们的服务器监听对“favicon.ico”的请求——几乎所有主要浏览器对网页的所有初始请求都会发出这个请求。此文件是您可以在您访问的每个网页的选项卡中看到的小图标。出于我们的目的，我们不需要提供网站图标，但我们将处理它的入站请求以显示一些基本的路由机制。

    } else {
      response.writeHead(200, {'Content-Type': 'text/html'});
      response.end(formOutput);
    }

如果您的访问者使用默认的 GET 方法将他们的浏览器指向您服务器上的任何其他资源(除了我们刚刚处理的“favicon.ico”)，我们将为他们提供表单。

  } else if(request.method === "POST") {

否则，如果您的访问者将 POST 指向您的服务器，则他们很可能已经提交了他们通过上一个 GET 请求检索到的表单。

    if (request.url === "/inbound") {

在这里，我们正在监听名为“/inbound”的入站请求——如果你发现了上面的小细节——就是我们 HTML 表单的“ Action ”。您可能知道，表单的“ Action ”告诉浏览器将表单数据发送到何处。

      var requestBody = '';
      request.on('data', function(data) {
        requestBody += data;
        if(requestBody.length > 1e7) {
          response.writeHead(413, 'Request Entity Too Large', {'Content-Type': 'text/html'});
          response.end('<!doctype html><html><head><title>413</title></head><body>413: Request Entity Too Large</body></html>');
        }
      });
      request.on('end', function() {
        var formData = qs.parse(requestBody);

这可能看起来有点令人困惑，但我保证不会。 POST 请求可以作为多部分消息从客户端浏览器发送。对于表单中只有几个变量这样小的东西，您可能永远不会看到这一点，但是当您扩展处理的数据量时，您会看到这一点。如果您细心，您还会看到 if()询问 POST 数据长度的语句。恶意的人可以通过上传无尽的文件来杀死您的服务器，但如果我们采取行动，则不会。这将 POST 数据主体限制为大约 10 兆字节，但您应该相应地进行调整。了解这些事情可以防止 future 头痛，我不想让你头痛。

        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write('<!doctype html><html><head><title>response</title></head><body>');
        response.write('Thanks for the data!<br />User Name: '+formData.UserName);
        response.write('<br />Repository Name: '+formData.Repository);
        response.write('<br />Branch: '+formData.Branch);
        response.end('</body></html>');
      });

这是我们使用表单数据的地方。由于 Javascript 的性质，这些变量名称区分大小写(例如“用户名”而不是“用户名”)。当然，你可以对这些数据做任何你想做的事情(记住 Node 的事件循环和异步特性)。

    }
    response.writeHead(404, 'Resource Not Found', {'Content-Type': 'text/html'});
    return response.end('<!doctype html><html><head><title>404</title></head><body>413: Request Entity Too Large</body></html>');

继续我们的路由示例，我们在这里所做的是在 if() 下包含一个包罗万象的内容。向客户端发送通用 404“未找到”回复的语句，以回复我们尚未处理的任何 POST 请求。

  } else {
    response.writeHead(405, 'Method Not Supported', {'Content-Type': 'text/html'});
    return response.end('<!doctype html><html><head><title>405</title></head><body>405: Method Not Supported</body></html>');
  }
}).listen(serverPort);
console.log('Server running at localhost:'+serverPort);

现在我们刚刚完成了代码，包括一些用奇怪方法处理请求的代码。有一些事情我没有解决(函数结构、空表单数据等)，但确实有很多方法可以实现您的目标。正如我的一位计算机科学教授多年前曾经说过的那样，编写程序的方法有很多种，通过分享他们的作业很容易看出谁在作弊。

我希望您(和其他任何人)可以看到，使用 Node 的内置模块而不是依赖外部第三方库(如 Express)在 Node 中做事并不是什么深奥的，甚至是有点困难的过程。这些库在世界上占有一席之地，但不要随波逐流:对您的代码做出明智的决定，因为归根结底，您是负责它的人(而不是 Stack Overflow 上的某些人)。

关于javascript - 如何在 node.js 中处理 POST 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15427220/

文章推荐： node.js - Fluxible 中的“脱水”和“再水合”代表什么？

文章推荐： python - panda的多索引的好处？

文章推荐： Android ListView Header 禁用点击

文章推荐： http - Node.JS 中的基本 HTTP 身份验证？

ios - 如果对主纹理进行 mipmap 处理，是否还需要对多重采样纹理进行 mipmap 处理？
对于 Metal ，如果对主纹理进行 mipmap 处理，是否还需要对多采样纹理进行 mipmap 处理？我阅读了苹果文档，但没有得到任何相关信息。最佳答案 Mipmapping 适用于您将从中
javascript - 让一些路由由 Groovy 处理，另一些由 React-router v4 处理
我正在使用的代码在后端 Groovy 代码中具有呈现 GSP(Groovy 服务器页面)的 Controller 。对于前端，我们使用 React-router v4 来处理路由。我遇到的问题是，通过
jquery - 让客户端 (Javascript) 处理 HTML 比用 C# 处理 HTML 更好吗？
我们正在 build 一个巨大的网站。我们正在考虑是在服务器端(ASP .Net)还是在客户端进行 HTML 处理。例如，我们有 HTML 文件，其作用类似于用于生成选项卡的模板。服务器端获取 HT
java - 处理 - 图像数组错误 - "Type mismatch, ' 处理 .core.PImage' 不匹配.."
我正在尝试将图像加载到 void setup() 中的数组中，但是当我这样做时出现此错误:“类型不匹配，'processing .core.PImage' does not匹配“processing.
javascript - 客户更新请求可通过 POSTMAN 处理，但无法使用 Shopify 私有(private)应用程序通过 AJAX 处理
我正在尝试使用其私有(private)应用程序更新 Shopify 上的客户标签。我用 postman 尝试过，一切正常，但通过 AJAX，它带我成功回调而不是错误，但成功后我得到了身份验证链接，而不
处理 - 更改默认应用程序图标
如何更改我的 Processing appIconTest.exe 导出的默认图标在窗口中的应用程序？默认一个: 最佳答案经过一些研究，我能找到的最简单的解决方案是: 进入 ...\process
处理:如何添加背景音乐
我在 Processing 中做了一个简单的小游戏，但需要一些帮助。我有一个 mp3，想将它添加到我的应用程序中，以便在后台循环运行。这可能吗？非常感谢。最佳答案您可以使用声音库。处理已经自带
处理 - 将一起形成一个圆的多个图像按钮
我有几个这样创建的按钮: 在 setup() PImage[] imgs1 = {loadImage("AREA1_1.png"),loadImage("AREA1_2.png"),loadImage
处理:如何分屏？
我正在尝试使用 Processing 创建一个多人游戏，但无法弄清楚如何将屏幕分成两个以显示玩家的不同情况？就像在 c# 中一样，我们有Viewport leftViewport,rightView
处理如何根据草图中的位置改变颜色？
我一直在尝试使用 Moore 邻域在处理过程中创建元胞自动机，到目前为止非常成功。我已经设法使基本系统正常工作，现在我希望通过添加不同的功能来使用它。现在，我检查细胞是否存活。如果是，我使用 fill
JavaScript 处理
有没有办法用 JavaScript 代码检查资源使用情况？我可以检查脚本的 RAM 使用情况和 CPU 使用情况吗？由于做某事有多种方法，我可能会使用不同的方法编写代码，并将其保存为两个不同的文件，
list - 处理 list
我想弄清楚如何处理这样的列表: [ [[4,6,7], [1,2,4,6]] , [[10,4,2,4], [1]] ] 这是一个整数列表的列表我希望我的函数将此列表作为输入并返回列表中没有重复的整
Flutter 处理 MethodChannel
有没有办法在不需要时处理 MethodChannel/EventChannel ？我问是因为我想为对象创建多个方法/事件 channel 。例子: class Call { ... fields
python - 处理 ConnectionResetError
我有一个关于在 Python3 中处理 ConnectionResetError 的问题。这通常发生在我使用 urllib.request.Request 函数时。我想知道如果我们遇到这样的错误是否可
处理 float 的奇怪问题
我一直在努力解决这个问题几个小时，但无济于事。代码很简单，一个弹跳球(粒子)。将粒子的速度初始化为 (0, 0) 将使其保持上下弹跳。将粒子的初始化速度更改为 (0, 0.01) 或任何十进制浮点数都
python - 处理 : 时遇到错误
我把自己弄得一团糟。我想在我的系统中添加 python3.6 所以我决定在我的 Ubuntu 19.10 中卸载现有的。但是现在每次我想安装一些东西我都会得到这样的错误: dpkg: error w
Rpart - NA 处理
我正在努力解决 Rpart 包中的 NA 功能。我得到了以下数据框(下面的代码) Outcome VarA VarB 1 1 1 0 2 1 1 1
java - 处理/访问磁盘上的文件
我将 Java 与 JSF 一起使用，这是 Glassfish 3 容器。在我的 Web 应用程序中，我试图实现一个文件(图像)管理系统。我有一个 config.properties我从中读取上传
optimization - 处理:如何提高程序的帧率？
所以我一直在Processing工作几个星期以来，虽然我没有编程经验，但我已经转向更复杂的项目。我正在编写一个进化模拟器，它会产生具有随机属性的生物。最终，我将添加复制，但现在这些生物只是在屏幕上漂
Delphi 2009 处理 with
有人知道 Delphi 2009 对“with”的处理有什么不同吗？我昨天解决了一个问题，只是将“with”解构为完整引用，如“with Datamodule、Dataset、MainForm”。

IT老高

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 node.js 中处理 POST 请求