1-----Ajax
2----post
3----get
4----readfile
<h1>this is login page</h1>
<!-- <form method="post" action="http://localhost:8989/submit">
<input type="text" name="user" placeholder="请输入用户名"><br><br>
<input type="password" name="password" placeholder="请输入密码">
<input type="submit">
</form> -->
<!-- 如果只是修改了前端页面,不需要重启服务器 -->
<input type="text" name="user" placeholder="请输入用户名"><br><br>
<input type="password" name="password" placeholder="请输入密码">
<input type="submit">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
// 使用了Ajax 就不要使用form
$('input[type="submit"]').click(()=>{
$.ajax({
url:'http://localhost:8989/submit',
method:'post',
data:{
user:$('input').eq(0).val(),
pass:$('input').eq(1).val()
},
success:(res)=>{
// 此处接收的是后台发送过来的数据
console.log(res);
if(res){
// 页面跳转
location.href="http://localhost:8989/music/index.html"
}
}
})
})
2----post
const http=require('http');
const fs=require('fs');
const path=require('path');
const querystring=require('querystring')
const url=require('url')
let server=http.createServer((req,res)=>{
if(req.url=='/favicon.ico') return;
if(req.url.startsWith('/login')){
fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
if(err) throw err;
res.end(data)
})
}else if(req.url.startsWith('/submit')){
if(url.parse(req.url,true).query.user){
let user=url.parse(req.url,true).query.user;
let password=url.parse(req.url,true).query.password;
res.end(`user is ${user} password is ${password}`)
}else{
// post请求的数据是一段段发送的
var allData='';
// data相当于是一个事件 监听客户端发送过来的数据
// post请求发送过来的数据是一段一段的
req.on('data',(chunk)=>{
console.log(chunk.toString());
// chunk代表的是前端发送过来的数据
allData+=chunk
})
// end是一个事件,代表数据接收完毕
req.on('end',()=>{
// allData得到的数据是k=v&k=v的形式 使用querystring转化
// querystring可以把类似k=v&k=v转化为对象的形式
console.log(querystring.parse(allData))
res.end(allData)
})
}
}else if(req.url.startsWith('/music')){
fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
if(err) throw err;
res.end(data)
})
}
else{
res.end('404')
}
})
server.listen('8989');
3----get
const http=require('http');
const fs=require('fs');
const path=require('path');
const url=require('url')
let server=http.createServer((req,res)=>{
if(req.url=='/favicon.ico') return;
if(req.url.startsWith('/login')){
fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
if(err) throw err;
res.end(data)
})
}else if(req.url.startsWith('/submit')){
res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});
// 接收get请求过来的参数
// get请求的参数在地址内部放置,需要解析地址
// url模块专门用来解析地址
// url.parse(地址)
// req.url前台路由
//url.parse(地址,true)可以把地址的字符串转化为对象
// query属性对应的就是前端的参数 如果第二个值是true 可以把query转换为对象
console.log(url.parse(req.url,true).query.user);
let user=url.parse(req.url,true).query.user;
let password=url.parse(req.url,true).query.password;
res.end(`user is ${user} password is ${password}`)
}
else{
res.end('404')
}
})
server.listen('8989');
4----readfile
const http=require('http');
const fs=require('fs');
const path=require('path');
let server=http.createServer((req,res)=>{
if(req.url=='/favicon.ico') return;
console.log(req.url);
// a.startsWisth('b')检测a是否以b字符串开始
// www一般放置的是静态资源 文件的首页需要是index
// 刚开始输入路径的时候,需要输入全称 music/index.html
if(req.url.startsWith('/music')){
fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
if(err) throw err;
res.end(data);
})
}else if(req.url.startsWith('/login')){
fs.readFile(path.join(__dirname,'www',req.url),(err,data)=>{
if(err) throw err;
res.end(data)
})
}else{
res.end('404')
}
})
server.listen('8989');