node.js学习（6）——ajax提交数据练习
2018-09-23 本文已影响17人
YINdevelop
上一节-node.js学习（5）—form提交数据（post）
1.ajax提交数据练习
前面我们已经讲了使用form表单get、post方式提交数据和node交互。本节我们做一个综合小🌰。页面为用户输入账号密码可以进行登录注册。我们通过node在后台进行验证用户信息并通过接口返回相对于的信息。
demo.gif
目录结构如下：
Jietu20180922-234358.jpg
2.定义html
我们在ajax.html增加下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册登录</title>
</head>
<body>
账号：<input type="text" name="name" class="name" />
密码：<input type="text" name="pass" class="pass" />
<button class="register">
注册
</button>
<button class="login">
登录
</button>
</body>
<script src="jquery-3.3.1.min.js"></script> //jquery事先从网上下载好，后面请求数据需要
</html>
3.定义接口格式
在写后端代码之前，需要先定义接口格式，从页面来看，我们需要
3个接收参数：
type:str 访问类型，'login'-登录 'reg'-注册
name:st 账号值
pass:str 密码值
如{"type":"reg","name":"1","pass":"1111"}
返回值为：
code:number 返回状态值， 1-成功 0-失败
msg:str 返回信息
{如"code":1,"msg":"账户名已存在"}
4.增加后端代码
然后我们在server.js增加下面代码：
const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
const urlFormatter = require('url');
// 假设dataBase为数据库，用来保存注册的账号信息
let dataBase={};
http.createServer(function (req, res) {
let str = '';
//只有post才会执行该函数
req.on('data', function (data) {
str += data;
});
//get、post都会执行该函数
req.on('end', function () {
const obj = urlFormatter.parse(req.url, true);
const pathname = obj.pathname; // /ajax.html
const getData = obj.query; //通过get请求的值，如{'type':'reg',name':'test','pass':1}
const postData = querystring.parse(str); //通过post请求的值
const path = `./www${req.url}`;
// 这里假设访问 /user为接口，其他为文件，所以增加if else
if (pathname == '/user') {
//判断用户方式（登录、注册）,这里使用了getData，没有使用postData（即定义了接口使用get传输）进行判断
switch (getData.type) {
case 'reg':
// 1.检查用户名是否存在
// 2.若不存在在数据库中写入用户名、密码
if(dataBase[getData.name]){
res.write('{"code":0,"msg":"用户名已经存在"}')
}else{
dataBase[getData.name]=getData.pass
res.write('{"code":1,"msg":"注册成功"}')
}
break;
case 'login':
//1.检查用户是否已经注册
// 2.检查密码是否正确
if(dataBase[getData.name]==undefined){
res.write('{"code":0,"msg":"该用户未注册"}')
}else if(dataBase[getData.name]==getData.pass){
res.write('{"code":1,"msg":"登录成功"}')
}else{
res.write('{"code":0,"msg":"密码错误"}')
}
break;
default:
res.write('{"code":0,"msg":"未知的类型"}')
break;
}
res.end();
} else {
fs.readFile(path, function (err, data) {
if (err) {
res.write('404');
} else {
res.write(data);
}
res.end();
});
}
});
}).listen(8080)
上面的代码备注大部分解释已经标明。所用的代码都是前面所讲的综合。但是还有几点需要注意。
- 上面代码的逻辑使用的是getData来进行判断，所以我们后面只能用get方式访问接口。若需要使用post，只需要把判断部分的getData换成postData即可。
- 实际后端代码不会使用if else这样的方式来判断是否是接口还是文件的，本例只是为了练习之前的代码，并做一个简易的服务端。
5.前端请求数据
- 定义了接口格式，我们知道了请求接口所需要传的参数
- 定义了后端代码后，我们知道后端提供的方式为get请求
那么我们开始增加请求的代码，在ajax.html增加下面js：
<script>
// 注册
$(document).on('click', '.register', function () {
const name = $(".name").val();
const pass = $(".pass").val();
$.ajax({
type: 'get', //因为接口已经定义为getData接收，所以，这里用get，当然也可以在控制台看见headers是明文传输
url: '/user',
data: {
'type': 'reg',
'name': name,
'pass': pass
},
// dataType:'jsonp', //这里直接通过端口访问服务器上的ajax.html，所以不需要jsonp跨域
// jsonpCallback:"cb",
success: function (data) {
const jsonData=$.parseJSON( data ) //json字符串转json
alert(jsonData.msg)
},
error: function () {
alert('请求错误')
}
})
})
// 登录
$(document).on('click', '.login', function () {
const name = $(".name").val();
const pass = $(".pass").val();
$.ajax({
type: 'get',
url: 'http://localhost:8080/user',
data: {
'type': 'login',
'name': name,
'pass': pass
},
// dataType:'jsonp',
// jsonpCallback:"cb",
success: function (data) {
const jsonData=$.parseJSON( data )
alert(jsonData.msg)
},
error: function () {
alert('请求错误')
}
})
})
</script>
6.get和post安全性再次验证
至此，我们前后端代码已经全部完成，demo效果如下，我们也可以从demo里面看出get的明文传输（参数会放置在HTTP请求协议头（headers）中，也就是URL之后；而POST提交的数据则放在实体的主体（request-body）中。）
get
demo1.gif
我们把后端getData换成postData,前端请求get换成post
post.gif
