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


Posted in Javascript onAugust 30, 2019

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

一、获取GET请求流程

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

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

<body>
<a href="index2.html" 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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 #Javascript
Node.js系列之发起get/post请求(2)
Aug 30 #Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 #Javascript
微信小程序实现写入读取缓存详解
Aug 30 #Javascript
VUE 自定义组件模板的方法详解
Aug 30 #Javascript
Jquery动态列功能完整实例
Aug 30 #jQuery
vue 兄弟组件的信息传递的方法实例详解
Aug 30 #Javascript
You might like
使用 php4 加速 web 传输
2006/10/09 PHP
PHP与SQL注入攻击[三]
2007/04/17 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
htm调用JS代码
2007/03/15 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python推导式的使用方法实例
2021/02/28 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
委托证明的格式
2014/01/10 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
网站客服岗位职责
2014/04/05 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
平遥古城导游词
2015/02/03 职场文书
销售员自我评价
2015/03/11 职场文书
学校捐款活动总结
2015/05/09 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB