Node学习（1）表单提交，由浅及深

小鱼儿 2022-06-01 10:26 184阅读 0赞

**Post表单提交：**

这里我们首先借助菜鸟网站上的一个post实例说明一下：

var http = require('http'); var querystring = require('querystring'); var postHTML = '<html><head><meta charset="utf-8"><title>菜鸟教程 Node.js 实例</title></head>' + '<body>' + '<form method="post">' + '网站名： <input name="name"><br>' + '网站 URL： <input name="url"><br>' + '<input type="submit">' + '</form>' + '</body></html>'; http.createServer(function (req, res) { var body = ""; req.on('data', function (chunk) { body += chunk; }); req.on('end', function () { // 解析参数 body = querystring.parse(body); // 设置响应头部信息及编码 res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'}); if(body.name && body.url) { // 输出提交的数据 res.write("网站名：" + body.name); res.write("<br>"); res.write("网站 URL：" + body.url); } else { // 输出表单 res.write(postHTML); } res.end(); }); }).listen(3000);

上述的例子中，将html文件通过字符串拼接的形式进行封装，再通过res.write（）打印出来。

但是，倘若html文档内容很多，则不能采用这种方法。正确的思路应该是：打开并获取相应的html内容，再将其打印出来。具体步骤如下：

**第一步：创建一个index.html文件，如下所示：**

<!DOCTYPE html> <html> <head> <title>node</title> <meta charset="utf-8"> </head> <body> <form method="post" action=""> <h2>get发送</h2> 名称：<input type="text" name="name"><br/> URL：<input type="test" name="url"><br/> <input type="submit" name="" value="提交"> </form> </body> </html>

第二步：读取index.html文件中的内容

方法有很多：

**（1）从Stream流中读取数据**

var http = require('http'); var fs = require('fs'); var querystring = require('querystring'); var data=''; var stream=fs.createReadStream('index.html'); stream.on('data',function(chunk){ data+=chunk }) stream.on('end',function(){//当没有更多数据可获取时 http.createServer(onRequest).listen(3000); console.log("Server has been created!") }) function onRequest(req,res){ var urlstr=""; //当接收到post请求时，获取请求的数据 req.on('data', function(chunk){ urlstr+= chunk; }); //当获取完所有数据后，对数据参数进行解析 req.on('end', function(){ // 解析参数 urlstr = querystring.parse(urlstr); console.log(urlstr)//在控制台中输出提交的数据 // 设置响应头部信息及编码 res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'}); if(urlstr.name && urlstr.url) { // 输出提交的数据 res.write("网站名：" + urlstr.name); res.write("<br>"); res.write("网站 URL：" + urlstr.url); //当没有可以获取的数据时，显示html页面 }else{ // 输出表单 res.write(data); } res.end(); }); }

**（2）readFile读取数据**

fs.readFile('./index.html','utf-8',function(err,d){ data=d });

主要的方法与上一个例子相同。不同点在于，这里的data不属于stream中的数据，可以全局使用。而上一个例子中，如果data最后只能在stream.on('end',function()\{\})中使用，否则，数据为空。

**（3）file文件的方法读取数据**

var http = require('http'); var fs = require('fs'); var querystring = require('querystring'); var buf = new Buffer(1024); var data=""; fs.open('index.html','r+',function(err,fd){ if (err) {return console.error(err)} fs.read(fd,buf,0,buf.length,0,function(err,bytes){ if (err) {console.log(err)} console.log(bytes+'字节被读取了'); if (bytes>0) { data=buf.slice(0,bytes).toString() //console.log(data) } }); }) http.createServer(onRequest).listen(3000); console.log("Server has been created!")

此处利用了Buffer缓存的方式对数据进行读取.

**Get表单提交：**

var http=require('http'); var url=require('url'); var util=require('util'); http.createServer(function(req,res){ res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'}) var params=url.parse(req.url,true); console.log("网站名: "+params.query.name); console.log("网站 URL：" + params.query.url); console.log("search：" + decodeURI(params.search)); res.end(util.inspect(url.parse(req.url,true))); }).listen(3000); console.log('createServer is created')

get提交与post提交一个主要的不同点就是，获取参数的方式不同：

get-->url.parse(req.url,true)，这里获取到的是一个json对象，可以通过获取对象属性的方式得到各项参数

post-->querystring.parse(urlstr)，这里得到的也是json对象

若提交的数据中包含中文字符，则需要利用decodeURLComponent()方法进一步解码

**综合性实例：**  
最后，参考一篇文章中的实例，进行了适当修改，给出了下面的综合性实例。原文参见：http://www.cnblogs.com/leejersey/p/5479012.html

**HTML：index.html**

<!DOCTYPE html> <html> <head> <title>node</title> <meta charset="utf-8"> </head> <body> <form method="get" action="getlogin"> <h2>get发送</h2> 名称：<input type="text" name="name"><br/> URL：<input type="test" name="url"><br/> <input type="submit" name="" value="提交"> </form> <form method="post" action="postlogin"> <h2>post发送</h2> 名称：<input type="text" name="name"><br/> URL：<input type="test" name="url"><br/> <input type="submit" name="" value="提交"> </form> </body> </html>

**Server端**

var httpserver = require("http"); var qs = require("querystring"); var url = require("url"); var fs = require("fs"); httpserver.createServer(onRequest).listen(3000); function onRequest(request,response){ var pathname = url.parse(request.url).pathname; if(pathname=="/"){//访问表单页面 response.writeHead(200,{"Content-Type":"text/html"}); fs.readFile("index.html","utf-8",function(e,data){ response.write(data); response.end(); }); }else if(pathname=="/postlogin"){//处理post方式请求 var urlstr=""; request.addListener("data",function(postdata){ urlstr+=postdata;//接收到的表单数据字符串，这里可以用两种方法将UTF-8编码转换为中文 var jsondata = qs.parse(urlstr);//转换成json对象 var decodedata = decodeURIComponent(urlstr);//对表单数据进行解码 console.log(urlstr); console.log(jsondata); console.log(decodedata); urlstr = decodedata; }); request.addListener("end",function(){ response.writeHead(200,{"Content-Type":"text/plain; charset=utf-8"}); response.write(urlstr); response.end(); }); }else if(pathname=="/getlogin"){ //处理get方式请求 var urlstr = url.parse(request.url).query; var jsondata = qs.parse(urlstr); var decodedata = decodeURIComponent(urlstr); console.log(urlstr); console.log(jsondata); console.log(decodedata); urlstr = decodedata; response.writeHead(200,{"Content-Type":"text/plain; charset=utf-8"}); response.write(urlstr); response.end(); }else{ response.writeHead(200,{"Content-Type":"text/plain"}); response.write("error"); response.end(); } }

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 TypeScript由浅到深

基本类型介绍 1.Boolean，Number，String > 声明:类型 = 类型对应变量 let flag:boolean = true l

忘是亡心i/ 2024年04月01日 17:55/ 0 赞/ 115 阅读

相关 C语言由浅到深学习笔记

文章目录一空指针和野指针空指针野指针二指针的步长三字符串的拷贝四字符串反转五字符串的格式化

女爷i/ 2023年01月06日 05:28/ 0 赞/ 172 阅读

相关 java web 表单提交_JavaWeb学习日记----表单提交方式

1.表单提交方式 (1) 使用input控件中的submit提交代码如下： Title用户：密码：结果： ![b7adcc2965a8bbbfc71ccb4

客官°小女子只卖身不卖艺/ 2022年11月02日 11:56/ 0 赞/ 350 阅读

相关 html禁止form表单提交表单提交,onsubmit阻止表单提交

在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 Bootstrap 实例 - 提交表单验证 //---> function checksubm

骑猪看日落/ 2022年10月07日 11:57/ 0 赞/ 488 阅读

相关由浅至深学习block

关于block 在iOS 4.0之后，block横空出世，它本身封装了一段代码并将这段代码当做变量，通过block()的方式进行回调。这不免让我们想到在C函数中，我们可以定义

淡淡的烟草味﹌/ 2022年06月09日 05:23/ 0 赞/ 206 阅读

相关 angularjs 由浅到深(2)

`ng-model` 指令可以为应用数据提供状态值(invalid, dirty, touched, error): AngularJS 实例 < form ng-a

电玩女神/ 2022年06月08日 05:36/ 0 赞/ 301 阅读

相关 Node学习（1）表单提交，由浅及深

Post表单提交：这里我们首先借助菜鸟网站上的一个post实例说明一下： var http = require('http'); var querystring

小鱼儿/ 2022年06月01日 10:26/ 0 赞/ 185 阅读

相关 Node.js 表单提交&静态资源服务器

var http = require("http"); var url = require("url"); var server = http.crea

àì夳堔傛蜴生んèń/ 2022年04月11日 14:09/ 0 赞/ 196 阅读

相关 Windows Phone中Map控件由浅及深

鄙人所在的OMG团队在高级软件工程课程团队项目，负责Microsoft的Academic Search在手机WP7.1上客户端的开发。现已进入十天的beta版本开发阶段。这两天

系统管理员/ 2021年12月24日 02:53/ 0 赞/ 222 阅读

相关表单提交

form表单提交可以使用以下两种方式 1. input <input class="btn btn-main" type="submit" placeholder

太过爱你忘了你带给我的痛/ 2021年09月28日 22:34/ 0 赞/ 630 阅读