上一节-node.js学习（3）— http模块与fs模块综合
1.常用的提交数据方式
通常我们前台从后台请求数据的方式有form、ajax、jsonp等。但对于后台方式都一样，那就是接收请求，返回数据。当然在数据请求方式上细分，一般又分为psot、get。
get——提交的数据在url后面拼接。
post——数据不在url里面。
本节我们将通过前面所学的搭建node服务器，并在后台接收前台提交的数据。
2.form提交-字符串截取
Jietu20180915-153834.jpg
在form.html增加如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="http://localhost:8080/aa" method=“get”>
<ul>
<li>
账号：<input type="text" name="user">
</li>
<li>
密码：<input type="password"" name="pass">
</li>
<li>
<input type="submit" value="提交">
</li>
</ul>
</form>
</body>
</html>
- 本例使用get方法提交，form不加method指定提交方式，默认也为get；
- action为提交数据地址，本例随便测试个地址http://localhost:8080/aa；
输入账号密码点击提交，可以很明显的看见get方式使用明文提交，输入的数据在url后面拼接。
form.gif
不过这不是本节的重点，本节的目的是如何在后台拿到接收的数据。
我们在form.js增加下面代码：
const http=require('http');
http.createServer(function(req,res){
if(req.url.indexOf('?')!=-1){
const arr=req.url.split('?')[1];//arr[0]=>'/aa' arr[1]=>'user=1&pass=1'
const arr1=arr.split('&'); //['user=1','pass=1']
let getData={}
arr1.map((item,index)=>{
const data=item.split('=');
getData[data[0]]=data[1]
})
console.log(getData); //{ user: '1', pass: '1' }
}
res.write('aa');
res.end();
}).listen(8080)
- req.url为 /aa?user=1&pass=1,通过字符串截取，以及遍历等操作，可以在getData拿到前台提交的数据。
- 代码中的if判断，是因为前面讲的谷歌浏览器 req.url会返回 /favicon.ico，导致因为没有？所无法截取而报错。
3.form提交-querystring(查询字符串)
前面我们使用split方法对字符窜进行截取，但实际工作过程中，这种方法显然太麻烦，不可取。所以当然有简便的办法。
使用node自带模块——querystring（将查询字符串解析成json对象）。
querystring.parse(str,sep,eq,options)
str为要查询的字符串；
sep用于界定字符串中的键值对的分隔符。默认为 '&'
eq用于界定字符串中的键与值的分隔符。默认为 '='。
举个🌰
var str=querystring.parse('uesr=1&pass=1&pass=2')
console.log(str) //{ user: '1', pass: [ '1', '2' ] }
注意：如果第二个参数不传，传第三个或者第四个，需要将其设为null；
下面我们更改上面的代码如下：
const http=require('http');
const querystring=require('querystring');
http.createServer(function(req,res){
if(req.url.indexOf('?')!=-1){
const arr=req.url.split('?')[1];
let getData=querystring.parse(arr)
console.log(getData); //{ user: '1', pass: '1' }
}
res.write('aa');
res.end();
}).listen(8080)
是不是省去了很多代码。但代码看着还是麻烦，有没有更简单的？当然有。
4.form提交—url(解析url字符串)
前面我们使用querystring进行查询字符串解析成json对象。
下面我们使用node自带模块——url（将url解析成对象）
url.parse(url, parseQueryString, slashesDenoteHost)
url：为要解析的 URL 字符串。
parseQueryString：布尔值。默认为flase，如果为真，会调用querystring.parse生成json对象。
slashesDenoteHost:暂未用到，需要使用再去查询。
举个🌰
🌰1:
const url = require('url');
const str = url.parse('http://www.test.com/aa?name=1&pass=1');
console.log(str);
{
protocol: 'http:',
slashes: true,
auth: null,
host: 'www.test.com',
port: null,
hostname: 'www.test.com',
hash: null,
search: '?name=1&pass=1',
query: 'name=1&pass=1',
pathname: '/aa',
path: '/aa?name=1&pass=1',
href: 'http://www.test.com/aa?name=1&pass=1'
}
🌰2:
const str1 = url.parse('http://www.test.com/aa?name=1&pass=1', true);
console.log(str1);
{
protocol: 'http:',
slashes: true,
auth: null,
host: 'www.test.com',
port: null,
hostname: 'www.test.com',
hash: null,
search: '?name=1&pass=1',
query: {
name: '1',
pass: '1'
},
pathname: '/aa',
path: '/aa?name=1&pass=1',
href: 'http://www.test.com/aa?name=1&pass=1'
}
经过上面的两个例子，我们可以很明显的看出来query属性已经被转化为对象。现在我们使用可以使用该方法愉快的简化我们之前的代码了。
修改后的代码如下：
const http = require('http');
const urlFormatter = require('url'); //url使用太多，使用urlFormatter，防止冲突
http.createServer(function (req, res) {
const getData =urlFormatter.parse(req.url,true).query;
console.log(getData); //{ user: '1', pass: '1' }、{}第二个为空是/favicon.ico后面没有查询字符串。
res.write('aa');
res.end();
}).listen(8080)
是不是又简化了很多。讲了这么多，get方式已经讲完了。下一节我们将对post方式进行讲解。
网友评论