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 相关文章推荐
jquery自定义属性(类型/属性值)
May 21 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
一起来了解一下JavaScript的预编译(小结)
Mar 01 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使用google地图应用实例
2014/12/31 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
python3处理word文档实例分析
2020/12/01 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
优秀员工年终发言演讲稿
2014/01/01 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
社区义诊通知
2015/04/24 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
如何写观后感
2015/06/19 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server