1.静态HTML页面加载封装
const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
// 设置类型, txt代表后缀 例如 .txt .html .css
function setType(txt){
let obj = {
'.html':'text/html',
'.css':'text/css',
'.js':'text/javascript',
'.jpg':'image/jpeg'
};
return obj[txt];
}
//设置绝对路径
let myAbs = path.join(__dirname,'../');
let server = http.createServer((req,res)=>{
let myUrl = url.parse(req.url,true);
let pathname = myUrl.pathname;
pathname = pathname=='/'?'/index.html':pathname;
let hz = path.extname(pathname);
res.setHeader('content-type',`${setType(hz)};charset=utf-8`);
//此处static为HTML，css,js文件外层名
let fileUrl = hz=='.html'?'static/html':'static';
fs.readFile(myAbs+fileUrl+pathname,(err,data)=>{
if(err){
console.error(err);
res.end('404');
}else{
res.end(data);
}
});
});
server.listen(8080,()=>{
console.log('服务器启动成功');
});
2. get/post方法处理form表单提交的数据
const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
// 引入 formidable 模块，该模块用来处理psot提交的文本和文件数据
const formidable = require('formidable');
let server = http.createServer((req,res)=>{
let url = req.url;
if(url=='/'){
fs.readFile('./post.html',(err,data)=>{
if(err){
console.log(err);
res.end('404');
}else{
res.end(data);
}
});
}else if(url=='/form.html'){
fs.readFile('./form.html',(err,data)=>{
if(err){
console.log(err);
res.end('404');
}else{
res.end(data);
}
});
}else if(url=='/post'){
// 获取post请求的数据 一般存放在 parseBody中
let parseBody = '';
// req:实际上是一个可读流 res：实际上是一个可写流
// 绑定data事件，如果有数据从前台传过来，就会触发
req.on('data',chunk=>{
parseBody+=chunk;
});
// 绑定end事件，如果数据传输结束，则该事件触发
req.on('end',()=>{
let obj = querystring.parse(parseBody);
res.setHeader('content-type','text/html;charset=utf-8');
res.end(`<h1>${obj.name}</h1>`);
});
}else if(url=='/postdata'){
res.setHeader('content-type','text/html;charset=utf-8');
// 实例化一个 IncomingForm对象
//此前npm i formidable 实现post提交除了可提交数据以外也可以获取文件资源
let form = new formidable.IncomingForm();
//使用 parse方法处理提交的数据，第一个参数是一个req，第二个参数是回调函数，该回调函数有三个参数，第一个是错误信息，第二个是前台传过来的文本信息，第三个是前台传过来的文件资源信息
form.parse(req,(err,fields,files)=>{
console.log(fields); //字段信息
console.log('==============');
// console.log(files); //文件信息
console.log(files.pic.path);
console.log(files.pic.name);
// 把临时存储的资源放进可读流
//files.pic.path 读取的文件路径
let rs = fs.createReadStream(files.pic.path);
// 设置一个可写流
//存储的文件路径及该文件名
let ws = fs.createWriteStream('./images/'+files.pic.name);
// 管道流写入
rs.pipe(ws);
//在前端页面返回的数据信息
res.end(fields.name);
});
}
});
server.listen(8080,()=>{
console.log('服务启动成功');
});
3.ajax 非form表单的get,post请求数据获取并返回
利用jq方法引入ajax，因此需要外联jq
//前端页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.wp {
border:1px #f00 solid;
width:500px;
margin:50px auto;
padding:50px;
}
</style>
</head>
<body>
<div class="wp">
<h1>get请求</h1>
姓名: <input type="text" value="" id="username" /> <br/>
年龄: <input type="text" value="" id="age" /> <br/>
<button id="getBtn">get提交</button>
<p id="msg1"></p>
</div>
<div class="wp">
<h1>post请求</h1>
姓名: <input type="text" value="" id="pname" /> <br/>
年龄: <input type="text" value="" id="page" /> <br/>
<button id="postBtn">post提交</button>
<p id="msg2"></p>
</div>
</body>
</html>
<script src="./jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// get请求
$('#getBtn').click(function(){
// $.get();
$.ajax({
type:'get',
url:'/getdata',
data:{
name:$('#username').val(),
age:$('#age').val()
},
success(data){
console.log(data);
$('#msg1').text(data);
}
});
});
//post请求
$('#postBtn').click(function(){
$.ajax({
type:'post',
url:'/postdata',
data:{
name: $('#pname').val(),
age: $('#page').val()
},
success(data){
console.log(data);
$('#msg2').text(data);
}
});
});
</script>
//server
const http = require('http');
const fs = require('fs');
const url = require('url');
const querystring = require('querystring');
let server = http.createServer((req,res)=>{
let myurl = url.parse(req.url,true);
if(myurl.pathname=='/'){
res.setHeader('content-type','text/html;charset=utf-8');
fs.readFile('./index.html',(err,data)=>{
if(err){
console.error(err);
res.end('404');
}else{
res.end(data);
}
});
}else if(myurl.pathname=='/jquery.js'){
res.setHeader('content-type','text/javascript;charset=utf-8');
fs.readFile('./jquery.js',(err,data)=>{
if(err){
console.error(err);
res.end('404');
}else{
res.end(data);
}
});
}else if(myurl.pathname=='/getdata'){
res.setHeader('content-type','text/html;charset=utf-8');
console.log(myurl.query); // 获取get提交的数据
res.end(myurl.query.name+'今年'+myurl.query.age+'岁了！');
}else if(myurl.pathname=='/postdata'){
res.setHeader('content-type','text/html;charset=utf-8');
let parserBody = '';
//http 的req为可读流
req.on('data',chunk=>{
parserBody += chunk;
});
req.on('end',()=>{
//获取的字符串转化为对象
let obj = querystring.parse(parserBody);
res.end(obj.name+'今年'+obj.age+'岁了！');
});
} else{
res.end('404');
}
});
server.listen(8080,()=>{
console.log('服务启动成功');
});
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
