// 1.导入http模块
var http = require('http');
// 2.导入文件模块
var fs = require('fs');
// 3.导入路径模块
var path = require('path');
// 4.导入url模块，作用是解析get请求的参数
var url = require('url');
// 5.创建服务器
var server = http.createServer();
// 6.监听客户端请求
server.on('request',function (req,res) {
// 7.如果url地址栏出现中文则浏览器会进行iso8859-1编码，解决方案使用decode解码
console.log('解码之后' + decodeURI(req.url));
// 8.如果url后面什么都没写，就转到index.html
if (req.url === '/') {
// 9.读取文件（路径拼接）
fs.readFile(path.join(__dirname,'index.html'),function (err,data) {
if (err) {
// 10. 如果有错误信息，程序终止运行并且打印err
throw err;
}
// 11.响应写入index.html文件
res.end(data);
})
// 12.如果访问jq
} else if (req.url === '/node_modules/jquery/dist/jquery.min.js') {
// 13.读取jq文件 （路径拼接 路径太长，用一个变量表示）
var jqPath = '/node_modules/jquery/dist/jquery.min.js';
fs.readFile(path.join(__dirname,jqPath),function (err,data) {
if (err) {
throw err;
}
// 14.响应写入jq文件
res.end(data)
})
// 15.如果是ajax请求 （get请求）
} else if (req.url.indexOf('/getRequest') === 0) {
/** 16. 解析URL路径
* 第一个参数：要解析的url
* 第二个参数：如果为true解析到的query是一个对象 false则是一个字符串
* 返回值是一个url对象，对象中的属性就是http协议中url的完整组成部分
*/
var urlObjc = url.parse(req.url,true)
// 17. 打印对象。里面有个对象是get请求参数
console.log(urlObjc);
// 18. 点出urlObjc里面的query（get请求参数）
var getObjc = urlObjc.query;
// 19. 响应返回读取到get请求参数 (需要把对象转化成字符串)
res.end(JSON.stringify(getObjc))
}
});
// n.开启服务器
server.listen(3000,function () { console.log('启用成功'); })
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<title>index</title>
</head>
<body>
<div>
<form id="form" action="">
<input type="text" name="name">
<input type="text" name="age">
<button type="submit">提交</button>
</form>
</div>
<!-- 标签href属性拼接了参数也是get请求 -->
<a href="/getRequest?name=kane&age=30">点我</a>
<button onclick="window.location.href='/getRequest?name=白萝卜蹲&age=22'">按钮</button>
</body>
<script>
$('#form').on('submit', function (e) {
// 禁用表单默认提交事件
e.preventDefault();
// ajax请求服务器数据
$.ajax({
url: '/getRequest',
type: 'get',
// 服务端返回数据的类型
dataType: 'json',
// 通过序列化表单值，创建 URL 编码文本字符串
data: $(this).serialize(),
success: function (data) {
window.alert(data);
}
});
});
</script>
</html>
网友评论