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 相关文章推荐
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 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
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
详解vue-cli3使用
2018/08/14 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
pandas修改DataFrame列名的方法
2018/04/08 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2014高考励志标语
2014/06/05 职场文书
食品安全汇报材料
2014/08/18 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
教师党员个人总结
2015/02/10 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
法院答辩状格式
2015/05/22 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python