node.js处理前端提交的GET请求

前言：AJAX的盛行，使得浏览器与服务器之间的交互越来越强大，我们需要通过 HTTP 通信，并从中提取出请求的 URL 以及 GET/POST 参数。随后需要根据这些数据来执行相应的操作，从而实现前后端交互。

一、获取GET请求流程

1、首先和以前一样，在server.js同目录下创建一个act文件夹，并在里面创建一个index1.html文件夹。index1.html代码为：

<body>
<a href="index2.html" rel="external nofollow" style="display:block; width:500px; height:300px; background:pink;"></a>
<form method="get" action="/get" style="padding:20px;"> <!-- method:提交方式是get,提交地址是/get -->
 名字：<input type="text" name="name"/><br />
  年龄：<input type="text" name="age" /><br />
  <input type="submit" value="提交"/>
</form>
</body>

2、先上server.js代码

var http = require('http');
var path = require('path');
var fs = require('fs');
var url = require('url');

//路由
var routes = {
 '/get':function(req,res){
 res.setHeader("Content-Type","text/plain; charset=utf-8");
 var name = req.query.name;
 var age = req.query.age;
 res.end('名字是：'+ name + ' 年龄是：'+age);
 //res.end( JSON.stringify(req.query));
 }
}

var server = http.createServer(function(req,res){

 var pathObj = url.parse(req.url, true);

 //新添加的处理路由的代码
 var handleFn = routes[pathObj.pathname];
 if(handleFn){
 req.query = pathObj.query; //获取get方式提交的数据
 handleFn(req, res);
 }else{ //如果找不到字段,就查找静态文件
 var staticPath = path.join(__dirname,'act');
 var filePath = path.join(staticPath,pathObj.pathname);
 fs.readFile(filePath,'binary',function(err,fileContent){
 if(err){
 res.writeHead(404,"Not Found");
 res.end('<h1>404 Not Found!</h1>')
 }else{
 res.writeHead(200,'ok');
 res.write(fileContent,'binary');
 res.end();
 }
 });
 }
});

server.listen(8080);
console.log('服务器已打开, 可以运行 http://localhost:8080');

解析代码 : 如果看过我前面写的"搭建静态服务器"的朋友应该就知道了，新增的代码就这几行。这样就简单了。

①、首先是创建个routes对象。然后在routes里面创建一个字段名为‘/get'的方法，用于稍后处理GET提交方式提交过来的数据。后续的操作也是在这里，例如：传数据给其他静态页面，或把数据存储到数据库，等等。

var routes = {
 '/get':function(req,res){
 res.setHeader("Content-Type","text/plain; charset=utf-8");
 var name = req.query.name;
 var age = req.query.age;
 res.end('名字是：'+ name + ' 年龄是：'+age);
 //res.end( JSON.stringify(req.query));
 }
}

②、首先通过pathObj.patnname获取到请求链接的url。然后在routes找是否存在这个“字段”，如果有，该字段的方法就赋值了给handleFn。最后通过pathObj.query获取到从get方式提交过来的数据，并执行该方法。

//新添加的处理路由的代码
 var handleFn = routes[pathObj.pathname];
 if(handleFn){
 req.query = pathObj.query; //获取get方式提交的数据
 handleFn(req, res);
 }

3、运行服务器，并在浏览器中打开 http://localhost:8080/index1.html

点击提交就会跳转到/get页面中了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • NodeJS收发GET和POST请求的示例代码

    NodeJS收发GET和POST请求的示例代码

    本文介绍了NodeJS收发GET和POST请求的示例代码,分享给大家,也给自己留个笔记 一 express框架接收 app.get('/',function(req,res) { var url = req.query.url; var name = req.query.name; console.log(url, name); }); 二 接收Get 1. get参数在req.url上 2. 使用url.parse将数据由字符串转变为obj index.js: var http = requi

  • Node.js系列之发起get/post请求（2）

    Node.js系列之发起get/post请求（2）

    服务器与浏览器的交互主要方式有get/post请求. 下面,我们来看一下node.js发起get/post请求. 1.get 由于get请求的参数在url后面,所以相对比较简单.node.js中的url模块提供了parse函数来处理.具体代码如下: //引入模块 var http=require('http'); var url=require('url'); var util=require('util'); //创建http Server 处理请求 http.createServer(fun

  • nodejs之koa2请求示例(GET,POST)

    GET 请求 在 koa 中,GET请求获取请求数据request对象中的 query 方法和 querystring 方法, query方法返回的是格式化好的参数,querystring 方法返回的是请求字符串.废话不多说,直接上代码 app.js 中添加如下代码: router.get('/getData', async (ctx,next) => { // 从上下文的request对象中获取 let request = ctx.request; let req_query = reques

  • nodejs使用http模块发送get与post请求的方法示例

    本文实例讲述了nodejs使用http模块发送get与post请求的方法.分享给大家供大家参考,具体如下: GET请求 var http = require('http'); var querystring = require('querystring'); var data = { a: 123, time: new Date().getTime()};//这是需要提交的数据 var content = querystring.stringify(data); var options = {

  • nodejs之get/post请求的几种方式小结

    最近一段时间在学习前端向服务器发送数据和请求数据,下面总结了一下向服务器发送请求用get和post的几种不同请求方式: 1.用form表单的方法: (1)get方法 前端代码: <form action = "/login" method = "GET"> <label for = "username">账号:</label> <input type = "text" name =&q

  • nodejs 使用http进行post或get请求的实例(携带cookie)

    安装http nmp install http 函数封装(可直接拿去进行使用) var http = require('http'); function nodePostGetRequest(HOST, PORT, method, bodydata, callBackFunction, path, cookie) { //把将要发送的body转换为json格式 var body = bodydata; var bodyString = JSON.stringify(body); //http 头

  • node.js处理前端提交的GET请求

    node.js处理前端提交的GET请求

    前言:AJAX的盛行,使得浏览器与服务器之间的交互越来越强大,我们需要通过 HTTP 通信,并从中提取出请求的 URL 以及 GET/POST 参数.随后需要根据这些数据来执行相应的操作,从而实现前后端交互. 一.获取GET请求流程 1.首先和以前一样,在server.js同目录下创建一个act文件夹,并在里面创建一个index1.html文件夹.index1.html代码为: <body> <a href="index2.html" rel="extern

  • 解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题

    node.js含有%百分号时,发送get请求时浏览器地址自动编码的问题 sales\报表.png 在发到后台时,会自动编码成: /file/view/sales/%E6%8A%A5%E8%A1%A8.png 在node.js会自动反编码成: sales\报表.png 不过如果文件名中含有%百分号,编码过程则会出现问题,如 sales\报%表.png 发送到node.js接收到的自动编码数据: /file/view/sales/%E6%8A%A5%%E8%A1%A8.png %E6%8A%A5%%

  • Node.js实现前端后端数据传输加密解密

    目录 一.简介 二.示例 2.1 生成公私钥对 2.2 公钥加密 2.3 私钥解密 三.总结 一.简介 在前后端通信过程中,一些敏感信息,特别是用户的账号密码,需要加密进行传输,如何选择加密方式也是一门学问,这里倒也不过多偏题了. 通常来说B/S架构中用的比较多的传输数据加密是RSA加密,核心思想就是公钥加密,私钥解密. 公钥,可以理解为可以公开的钥匙,服务器将公钥发给客户端,客户端用公钥对数据进行加密传输,服务器收到客户端传来的密文,再用自己的配对的私钥进行解密,即可获得原始的数据. 大致流程

  • Node.js获取前端ajax提交的request信息

    今天看一下Node.js怎么获取ajax提交的request 信息 众所周知,ajax可以在不刷新整个页面的情况下实现局部刷新,这是相当好的一种方式,能够让我们动态更新信息,今天我们看一下怎么用node来接收到前端ajax提交过来的信息 下面我贴一下前端的代码 index.html的代码我就不贴了, 因为里面就只有一个按钮而已,要实现的功能是点击按钮提交ajax异步请求 主要贴一下js页面的代码 $("button").on("click",function(){

  • Node.js如何响应Ajax的POST请求并且保存为JSON文件详解

    实现目的 使用D3.js开发的前端应用,用户与图交互更改图的内容后,如何在下一次加载的显示上一次最后交互的内容? 本文提供通过后端的Node.js程序提供一种最小化方案,作为参考. 开发环境 后端:Node.js Node.js模块:Express.body-parser.fs 前端:JQuery 后端 1.安装nodejs,装好后用显示版本号确认是否安装好 node --version 2.新建一工程目录(文件夹),安装模块. npm install express npm install b

  • Nginx设置为Node.js的前端服务器方法总结

    1.安装node.js 首先安装node.js安装所需的软件包,并在启动板上添加可用的nodejs的PPA.之后使用以下命令安装nodejs. $ sudo apt-get install python-software-properties python g++ make $ sudo add-apt-repository ppa:chris-lea/node.js $ sudo apt-get update $ sudo apt-get install nodejs 2.安装nginx 现在

  • 使用Node.js处理前端代码文件的编码问题

    使用 NodeJS 编写前端工具时,操作得最多的是文本文件,因此也就涉及到了文件编码的处理问题.我们常用的文本编码有 UTF8 和 GBK 两种,并且 UTF8 文件还可能带有 BOM.在读取不同编码的文本文件时,需要将文件内容转换为 JS 使用的 UTF8 编码字符串后才能正常处理. BOM 的移除 BOM 用于标记一个文本文件使用 Unicode 编码,其本身是一个 Unicode 字符("\uFEFF"),位于文本文件头部.在不同的 Unicode 编码下,BOM 字符对应的二进

  • Node.js中Koa2在控制台输出请求日志的方法示例

    Node.js中Koa2在控制台输出请求日志的方法示例

    前言 Koa2真的是个很轻量的框架,轻量到路由都作为了模块单独了出来,Koa2也没有日志功能,如果我们需要有一些请求的日志和时间,我们就需要引入日志中间件 下面话不多说了,来一起看看详细的介绍吧 引入时间格式化库MomentJS 安装MomentJS npm install moment --save 简单格式化时间 使用YYYY-MM-DD HH:MM:SS代表 年-月-日 时-分-秒(24小时制) console.log(Moment().format('YYYY-MM-DD HH:MM:S

  • 详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据

    最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题.后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发数据错乱.借此发 我先直接贴正确接收二进制数据代码 const server = http.createServer((req, res) => { if(req.method==='OPTIONS'){ res.setHeader("Access-Control-Allow-Origin&q

随机推荐