广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >nodejs中怎么实现get/post请求
  • 401
分享到

nodejs中怎么实现get/post请求

2024-04-02 19:04:59 401人浏览 八月长安
摘要

这篇文章给大家介绍nodejs中怎么实现get/post请求,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.用form表单的方法:(1)get方法前端代码:<fORM 

这篇文章给大家介绍nodejs中怎么实现get/post请求,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

1.用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方法首先要配置JSON文件,在command中输入命令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 改成 mthod = 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('服务器启动中');
})

2.xhr(XML HTTP Request方法 有三种请求方式 get/post/formdata)

XHR是ajax的核心,使用XHR可以向服务器发送数据 也可以解析服务器返回的数据;

(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('服务器启动中');

})

3.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('登录失败');
  }
})

(2)ajax之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方法的代码,ajax请求的方式通过type设置为get方式还是post方式。

关于nodejs中怎么实现get/post请求就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: nodejs中怎么实现get/post请求

本文链接: https://www.lsjlt.com/news/74403.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • nodejs中怎么实现get/post请求
    这篇文章给大家介绍nodejs中怎么实现get/post请求,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.用form表单的方法:(1)get方法前端代码:<form ...
    99+
    2022-10-19
  • NodeJS中怎么收发GET和POST请求
    NodeJS中怎么收发GET和POST请求,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一 express框架接收app.get('...
    99+
    2022-10-19
  • nodejs中的get/post请求方法是什么
    这篇文章主要介绍“nodejs中的get/post请求方法是什么”,在日常操作中,相信很多人在nodejs中的get/post请求方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2022-10-19
  • Qt怎么实现HTTP的Get/Post请求
    本文小编为大家详细介绍“Qt怎么实现HTTP的Get/Post请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“Qt怎么实现HTTP的Get/Post请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。借助Qt的...
    99+
    2023-06-30
  • axios gin的GET和POST请求怎么实现
    今天小编给大家分享一下axios gin的GET和POST请求怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧...
    99+
    2023-06-30
  • Nodejs怎么实现简单的GET请求
    这篇文章主要介绍了Nodejs怎么实现简单的GET请求,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。GET请求的识别非常的简单,就是URL的识别,使用的是url.parse(...
    99+
    2023-06-15
  • Node.js中怎么发起get/post请求
    Node.js中怎么发起get/post请求,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1、get由于get请求的参数在ur...
    99+
    2022-10-19
  • SpringMVC中怎么发送GET、POST请求
    SpringMVC中怎么发送GET、POST请求,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。我们知道发起 GET 请求和 POST 请求,只需要在表单的 form 标签中,设...
    99+
    2023-06-02
  • nodejs处理http请求实例详解之get和post
    目录前言:http 请求概述Q: 从浏览器输入 url 到页面显示的整个过程?nodejs 处理 get 请求简单的 demo测试一下nodejs 处理 post 请求简单的demo...
    99+
    2023-01-28
    nodejs处理http请求 node get请求 node post请求
  • PHP怎么使用cURL实现Get和Post请求
    使用cURL库可以轻松地实现GET和POST请求。GET请求:```php// 创建一个cURL资源$curl = curl_ini...
    99+
    2023-08-16
    PHP
  • nodejs实现HTTPS发起POST请求
    准备用nodejs搞一个快速注册163邮箱的东西,需要在某一步的时候post数据到https,node的官方文档实在太简陋了,网上找了个差不多的例子,拿来改了改用。 var util = require...
    99+
    2022-06-04
    nodejs HTTPS POST
  • C#winform请求http的实现(get,post)
    目录一:.Net中有两个类 HttpWebRequest 和HttpWebResponse 类来实现Http的请求二: HTTP定义了与服务器交互的不同方法POST与GET的差异两个...
    99+
    2022-11-13
  • 在PHP中怎么实现GET和POST请求的方法
    本篇内容主要讲解“在PHP中怎么实现GET和POST请求的方法 ”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“在PHP中怎么实现GET和POST请求的方法 ”吧...
    99+
    2022-10-19
  • Vue怎么为GET或POST请求设置请求头
    这篇文章主要介绍了Vue怎么为GET或POST请求设置请求头的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue怎么为GET或POST请求设置请求头文章都会有所收获,下面我们一起来看看吧。为GET或POST请求...
    99+
    2023-06-29
  • RestTemplate怎么调用POST和GET请求
    本文小编为大家详细介绍“RestTemplate怎么调用POST和GET请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“RestTemplate怎么调用POST和GET请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-07-05
  • 浅谈Qt实现HTTP的Get/Post请求
    目录头文件GetPost借助Qt的NetWork模块,可以轻松的实现HTTP的Get/Post请求,而不需要再次引用像libcurl这样的第三方库。当然,Qt的NetWork模块提供...
    99+
    2022-11-13
  • SpringBoot中的Get与Post请求怎么利用Restful service实现
    SpringBoot中的Get与Post请求怎么利用Restful service实现?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1. Get请求,url传参,返回jso...
    99+
    2023-05-31
    springboot restful service
  • react中axios怎么结合后端实现GET和POST请求
    这篇文章主要讲解了“react中axios怎么结合后端实现GET和POST请求”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react中axios怎么结合后端实现GET和POST请求”吧!r...
    99+
    2023-07-05
  • java中httpclient封装post请求和get的请求实例
    目录httpclient封装post请求和get的请求httpclient的post和get请求所用的代码HttpClient发送Get、Post请求的实践1. 配置及实例化Http...
    99+
    2022-11-12
  • 怎么利用Javascript发送GET/POST请求
    这篇文章主要为大家展示了“怎么利用Javascript发送GET/POST请求”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么利用Javascript发送GE...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作