js高级笔记-8

1-http服务器创建步骤

// 引入http模块
const http = require('http')
//创建服务器
let server = http.createServer((req, res) => {
	// 书写响应头，设置编码方式
	res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'});
	// 服务器发送内容给客服端 结束响应，后面的代码都不在执行
	res.end('添加表头以后不会乱码')
})
// 监听端口号
server.listen('8868');
// 打开网页输入localhost:8868就可以查看自己的网页了

2-form表单get请求步骤

所写的html文件需要放置在www/(自定义文件名)下且文件名必须为index.html
书写的js文件需要放置在和www同级的目录下，如果不是，需要注意请求路径
exp:
文件路径www/login/index.html
form表单的action为"http://localhost:8848/submit"  
method为"get"
js代码如下:

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'})
		// url.parse(地址, true)可以把地址的字符串转化为对象Object
		// query属性对应的就是前端的参数
		let user = url.parse(req.url,true).query.user
		let psw = url.parse(req.url,true).query.psw
		res.end(`您输入的用户名称是:${user}您的密码是:${psw}`)
	}else {
		res.end('404')
	}
})
server.listen('8848')

3-form表单post请求

所写的html文件需要放置在www/(自定义文件名)下且文件名必须为index.html
书写的js文件需要放置在和www同级的目录下，如果不是，需要注意请求路径
exp:
文件路径www/post/index.html
form表单的action为"http://localhost:9898/formpost"  
method为"post"
js代码如下:

const http = require('http')
const fs = require('fs')
const path = require('path')
const url = require('url')
// post请求需要用到querystring模块
const querystring = require('querystring')

let server = http.createServer((req, res) => {
	if(req.url == '/favicon.ico') return;
	if(req.url.startsWith('/post')){
		fs.readFile(path.join(__dirname,'www',req.url),(err, data) => {
			if(err) throw err;
			res.end(data);
		})
	}else if(req.url.startsWith('/formpost')){
		res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'})
		// 创建一个变量保存获取的值
		var allData = '';
		// post请求接受的代码是一段段的需要分开接受，用data事件
		req.on('data',(chunk) => {
			allData += chunk;
		});
		// 数据接受完毕事件，处理数据
		req.on('end',() => {
			// querystring.parse(allData).user 接受的数据转化为Object
			let user = querystring.parse(allData).user
			let password = querystring.parse(allData).password
			res.end(`
				用户：${user}
				密码：${password}
			`)
			// res.end(allData)
		})
	}else {
		res.end('404')
	}
})
server.listen('9898')

4-jQuery的ajax请求

如果使用jQuery，就不能使用form表单，否则会冲突
exp:
文件路径www/ajax/index.html
form表单的action为"http://localhost:9898/carry"  
method为"post"
html内部的js代码如下：

// 使用量ajax就不要使用form
// 给submit创建点击事件
$("input[type = 'submit']").click(() => {
	$.ajax({
		// 请求的url地址
		url:"http://localhost:9898/carry",
		// 请求的data地址
		data:{
			user:$('input').eq(0).val(),
			password:$('input').eq(1).val()
		},
		// 请求的方式
		method:'post',
		// 请求成功的回调函数
		success:(res) => {
			console.log(res);
			如果请求成功,进行页面跳转
			if(res){
				// 实现页面跳转
				location.href = "http://localhost:9898/music/index.html"
			}
		}
	})
})

服务器js代码如下：

/* ---------------声明所需的模块-------------- */
const http = require('http')
const fs = require('fs')
const path = require('path')
const url = require('url')
const querystring = require('querystring')
/* -----------------创建服务器---------------- */
let server = http.createServer((req, res) => {
	/* 如果返回浏览器小图标，直接忽略 */
	if(req.url == '/favicon.ico') return;
	/* 如果服务器的url地址以ajax开始，执行以下代码 */
	if(req.url.startsWith('/ajax')){
		fs.readFile(path.join(__dirname,'www',req.url),(err, data) => {
			if(err) throw err;
			res.end(data);
		})
	}
	/* 如果服务器的url地址以ajax开始，执行以下代码 */
	else if(req.url.startsWith('/carry')){
		res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'})
		var allData = '';
		req.on('data',(chunk) => {
			allData += chunk;
		});
		req.on('end',() => {
			let user = querystring.parse(allData).user
			let password = querystring.parse(allData).password
			res.end(`
				用户：${user}
				密码：${password}
			`)
			// 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('9898')