HTTP表单

创建一个HTTP服务

引入nodejs提供的http模块后就可以创建一个HTTP服务.
http.createServer返回当前服务器,然后再监听一下端口就可以访问localhost:3100了
req:客户端(浏览器)请求
res:服务器发送至浏览器的接口

1
2
3
4
5
var http=require("http");
var app=http.createServer(function(req,res){}
app.listen(3100,function(){
console.log("监听于3100端口")
})

HTTP的req与res

req和res是一个对象,所以不妨用console.log输出一下就可以看到众多信息了
req.url
req.url即客户端访问的url地址 但不包含主机头 如

1
2
get http://baidu.com/nice/
req.url=>/nice

res.writeHead,res.write,res.end
res.writeHead用来设置服务器发送至浏览器的头部信息 如图
res.writeHead
res.write用来向客户端发送body体…大致理解为HTML源码就okay了~
如果这个方法被调用但是 response.writeHead() 没有被调用,它将切换到默认header模式并更新默认的headers。
res.end
当body发送完毕的时候得调用一下res.end(),否则浏览器会一致向服务器发送请求(长时间链接不会断开)
如果在res.end结束后调用res.write则会报错
下面的代码只会输出 sdsdas和hello而setTimeout中的代码则不会输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http=require("http");
var app=http.createServer(function(req,res){
if(req.url=="/"){
res.writeHead(200,{"Content-Type":"text/html"})

res.write("sdsdsa")
setTimeout(function(){
res.write("2333")
},5000)
res.end("<h1>hello</h1>")
}
})
app.listen(3100,function(){
console.log("监听于3100端口")
})

开始制作一个HTTP表单

req.data,end事件
当客户端有数据传输都会产生以上两个事件
data事件接受数据,当数据产生完毕则会触发end事件

req.headers
客户端向服务端发送数据会包含客户端的头部.同res.headers

querystring
查询参数格式化
querystring.(“name=soul”)=>{name:soul}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var http=require("http");
var fs=require("fs");
var qs=require("querystring")
var app=http.createServer(function(req,res){
if(req.url=="/"){
res.writeHead(200,{"Content-Type":"text/html"})
fs.readFile(__dirname+"/index.html",function(err,data){
res.write(data)
res.end()
})
}else if(req.url=="/url"&&req.method=="POST"){
var body='';
req.on("data",function(data){
//这里必须隐式转化为字符串
body+=data
});
req.on("end",function(){
//qs.parse默认只支持字符串 直接写入data是一个二进制的data
console.log(qs.parse(body))
console.log("接收完毕")
res.write("<h1>Content-Type:"+req.headers["content-type"]+"</h1> <h1>接收到的数据为:"+body+"</h1>"+
"<h1>格式化后的数据为:"+JSON.stringify(qs.parse(body))+"</h1>")
res.end()
})
}
})
app.listen(3100,function(){
console.log("监听于3100端口")
})

HTML

1
2
3
4
5
6
7
8
9
10
<form action="http://localhost:3100/url" method="post">
<label for="">
<p>
请输入用户名
<input type="text" name="username" />
</p>

</label>
<input type="submit" value="提交"/>
</form>