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 相关文章推荐
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
加强版phplib的DB类
2008/03/31 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Python configparser模块应用过程解析
2020/08/14 Python
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
中职生自荐信
2013/10/13 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android