当前位置：首页 > 全部内容 > 正文

Node.js 实现 GET/POST 请求的三种方式详解

作者：星河

时间：2026-10-22

浏览：290

本文总结了Node.js环境下前端向服务器发送数据的三种常见方式：Form表单提交、XMLHttpRequest (XHR) 以及 Ajax 请求。文章详细对比了GET与POST方法在不同场景下的配置差异，包括Express模块初始化、body-parser引入及路由处理，并提供了相应的前后端代码示例供参考。

文章目录

近期在学习前端与服务器之间的数据交互，本文对使用 GET 和 POST 方法向服务器发送请求的几种不同实现方式进行总结。

Form 表单提交方式

第一种方式是通过 HTML Form 表单进行提交。

(1) GET 方法

前端代码实现如下：


<form action = "/login" method = "GET">

 <label for = "username">账号：</label>

 <input type = "text" name ="username" placeholder = "请输入账号" required>

 <br>

 <label for = "password">密码：</label>

 <input type = "password" name = "password" placeholder = "请输入密码" required>

 <br>

 <input type = "submit" value = "登陆">

</form>

对应的服务器端代码处理逻辑如下：

使用 GET 方法时，首先需配置项目文件，在命令行执行 npm init 命令，随后安装所需的 express 模块。此外，需在项目目录下创建一个用于存放静态资源的文件夹（如 wwwroot），具体配置代码如下：


var express = require('express'); // 引入模块

var web = express(); // 使用模块创建一个web应用

web.use(express.static('wwwroot')); // 调用use方法 使用static方法

web.get('/login',function(request,response) 

{

  使用get方法 参数1 接口 参数2 回调函数 (参数1 向服务器发送的请求 参数2 服务器返回的数据)

  var name = request.query.username;  // 获取前端发送过来的账号

  var psw = request.query.password;   // 获取前端发送过来的密码

  response.status('200').send('输入的内容是' + name + '<br>' + psw);

})

web.listen('8080',function()  // 监听8080端口 启动服务器

{

  console.log('服务器启动中');

})

（2）POST 方法

前端部分：使用 POST 方法时，需将 form 标签中的 method 属性由 GET 修改为 POST，以明确指定使用 POST 请求方式；

服务器部分：除了 GET 方法的基础要求外，还需引入 body-parser 模块，并对 URL 进行编码处理；


var express = require('express');
var bodyParser = require('body-parser');
var web = express();
web.use(express.static('wwwroot'));
// url 统一资源调配符 encoded 编码 
web.use(bodyParser.urlencoded({extended:false}));
web.post('/login',function(request,response)
{
  var name = request.body.username;
  var psw = request.body.password;
  if(name != '599115316@qq.com' || psw != '123456')
  {
    response.send('<span style = "color:blue">登录失败</span>')
  }
  else
  {
    response.send('<span style = "color:red">登陆成功</span>')
  }
})
web.listen('8080',function()

{
  console.log('服务器启动中');
})

XHR 对象请求方式

第二种方式是通过 XHR（XMLHttpRequest）对象发起请求，支持 GET、POST 和 FormData 三种模式。

XHR 是 Ajax 技术的核心组件，既可用于向服务器发送数据，也可用于解析服务器返回的响应数据；

(1) XHR 的 GET 方法：

前端实现代码：


<button click = "get()">get方法</button>

<script>

function()

{

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()

  {

    if(xhr.readyState == 4)

    {console.log(xhr.responseText)}  // 服务器接收到数据后返回的数据

  }

  xhr.open('/get','/comment?custom=小明&score=2&comment=商品质量一般，2分是给快递小哥的')；

  xhr.send();

// xhr.open(); 里面有三个参数 ,参数1：设置xhr请求服务器的时候，请求的方式；参数2：设置请求的路径和参数；(?是路径和参数的分割线)；参数3：设置同步请求还是异步请求，不写的话默认为异步请求;

}

</script>

服务器端处理代码：

同样需要先安装相关模块，并在请求中使用该模块；


var express = require('expres');

var app = express();

app.use(express.static('wwwroot'));

app.get('/comment',function(request,response)

{

  response.send('已经接受到用get方法发来的评价');

})

app.listen('3000',function()

{

  console.log('服务器启动中');

})

(2) XHR 的 POST 方法：

前端实现代码：


<button click = "post()">post方法</button>

<script>

function post()

{

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()

  {

     if(xhr.readyState == 4)

     {

       console.log('接收到服务器返回的信息' + xhr.responseText);

     }

  }

  xhr.open('post','/comment'); // post方法请求的参数不写在open里面，写在send里面，而且需要设置请求头；

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

  xhr.send('custom=小明&score=3&comment=商品还好，快递也及时，但是就想给3分')；

}

</script>

服务器端处理代码：

需要引入处理 POST 请求所需的模块（如 body-parser）以及对 URL 进行编码；


var express = require('express');

var bodyParser = require('body-parser');

var app = express();

app.use(express.static('wwwroot'));

app.use(bodyParser.urlencoded({extended:false}));

app.post('/comment',function(request,response)

{

  response.send('已经接收到用post方法发送来的评价');

})

app.listen('3000',function()

{

  console.log('服务器启动中')；

})

(3) XHR 的 FormData 方法：

前端实现代码：


<button click = "formdata()">formdata方法</button>

<script>

function formdata()

{

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()

  {

    if(xhr.readyState == 4)

    {

       console.log('formdata方法返回的数据是：' + xhr.responseText);

    }

  }

  xhr.open('post','/comment');

  var form = new FormData();

  form.append('custom','小明');

  form.append('score','5');

  form.append('comment','看你那么辛苦，给你5分好了');

  xhr.send(form);

}

</script>

服务器端处理代码：


var express = require('express');

var bodyParser = require('body-parser');

var multer = require('multer');  // 使用form表单所需要用到的一个模块

var formData = multer();

var app = express();

app.use(express.static('wwwroot'));

app.use(bodyParser.urlencoded({extended:false}));

// 如果使用formdata提交的数据，必须在参数中使用array()，array()会先解析请求体当中的数据，再传输数据

app.post('/comment',formData.array(),function(request,response) 

{

  response.send('已经接收到用post方法发送来的评价');

})

app.listen('3000',function()

{

  console.log('服务器启动中')；

})

Ajax 请求方式

第三种方式是通过 Ajax 发起请求。

通常情况下并非必须使用 Ajax，但借助 Ajax 可以获取错误信息及其他指令。使用 Ajax 需要引用 jQuery 库；

(1) Ajax 的 GET 请求：

前端实现代码：


<button id = "get">ajax-get</button>

<script>

$('#get').click(function()

{

  $.get('/login',{name:'小明',password:'123456'},function(data,status,xhr)

  {

     console.log('服务器返回的信息是' + data);

  })

// $.get() 发起一个get请求，参数1：请求的接口；参数2：传递给服务器的数据对象；参数3：回调函数(参数1：服务器返回的数据；参数2：状态；参数3：xhr对象”)；

})

</script>

服务器端处理代码：


var express = require('express');

var app = express();

app.use(express.static('wwwroot'));

app.get('/login',function()

{

  if(request.query.name == '小明' && request.query.password == '123456')

  {

     response.send('登录成功');

  }

  else

  {

     response.send('登录失败');

  }

})

app.listen('8080',function()

{

  console.log('服务器启动中');

})

(2) Ajax 的 POST 请求：

前端实现代码：


<button id = 'post'>ajax-post</button>

<script>

  $('#post').click(function()

{

  $.post('/login',{name:'小明',password:'666'},function(data,status,xhr)

  {

     console.log('服务器返回的数据：' + data)

  })

})

</script>

服务器端处理代码：


var express = require('express');
 
var bodyParser = require('body-parser');
 
 
var app = express();
 
app.use(express.static('wwwroot'));
 
app.use(bodyParser.urlencoded({extended:false}));
app.listen('8080',function()
{
  console.log('服务器启动中')；
})
app.post('/login',function(request,response)
{
  if(request.body.name == '小明' && request.body.password == 666)
  {
    response.send('登录成功');
  }
  else
  {
     response.send('登录失败');
  }
})

(3) Ajax 的通用请求：

前端实现代码：


<button id ="ajax">ajax请求</button>
<script>
  $('#id').click(function()
{
// $.ajax() 发起ajax请求;
  $.ajax({
   url :'/login',        // 请求的接口地址
   type:'post',         // 请求的方式，默认为get请求
   data:{name:'小明',password:'123'},  // 发送到服务器的数据
   timeout:10000,       // 超时 (10s)
   cache:true,           // 缓存 默认为true
   async:true,           // 是否异步 
// 同步任务(sync) :当上一个任务没有完成的时候，下一个任务无法开启，有可能会卡死主线程；
//异步任务(Async):当上一个任务没有完成的时候，下一个任务仍然会被执行，用户体验性好；
   success:function(data,status,xhr)
  {
     console.log('服务器返回的数据是:' + data);
     console.log('返回的信息是:' + xhr.getAllResponseHeaders());
  }
  error:function(xhr,status,error)
  {
    console.debug('错误信息：' + error);
  }
  complete:function(xhr,status)
  {
     console.log('全部流程结束');
  }
})          
})
</script>

服务器端可复用上述 Ajax 的 GET 和 POST 方法代码，通过设置 type 参数为 get 或 post 来区分请求方式。

以上关于 Node.js 中 GET/POST 请求几种方式的总结即为全部内容，希望能为大家提供参考，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

Node.js 安装配置与第一个 HTTP 服务器编写

怎么使用 nvm 管理并平滑升级 Node.js 版本

Node.js 怎么使用 zlib 模块解压 gzip 和 deflate

直接覆盖安装还是用版本管理器？Node.js 升级方式对比

Express.js 是什么：Node.js Web 框架核心概念与适用场景

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法