1. 表单提交的那一瞬间,客户端与服务端进行的数据处理
2. 表单具有默认的提交行为,默认是同步的,同步表单提交,浏览器会锁死(转圈)等待服务端的响应结果。
3. 表单的同步提交之后,无论服务端响应的是什么,都会直接把响应的结果覆盖掉
4. 而使用 ajax 则是异步请求提交表单,不会重新渲染整个页面
```js
/*
客户端向服务端发送表单数据,并获得回复
1. 客户端提交表单,这里需要禁止 submit 默认事件
2. 服务端收到表单数据,确认无误后,返回服务端 json 或其他格式数据
3. 客户端在点击提交表单的同时发起 ajax 请求,获得服务端 send 的数据
{
url: '/register',
type: 'post',
data: formData, //表单数据
dataType: 'json'
succese: function (res) {}
}
*/
$('#register_form').on('submit', function (e) {
e.preventDefault() // 禁止点击默认的跳转事件
var formData = $(this).serialize() // 获得表单数据,并序列化,是 string 类型
$.ajax({
url: '/register',
type: 'post',
data: formData,
dataType: 'json',
success: function (data) {
console.log(data);
}
})
})
```
2. 收到表单提交的那一瞬间,服务端的处理
```js
// 提交注册
router.post('/register', function (req, res) {
// 1. 获取表单提交的数据
// req.body
// 2. 操作数据库
// 判断该用户是否存在,
// 如果已经存在,不允许注册
// 如果不存在,注册新建用户
// 3. 发送响应
// console.log(req.body);
var body = req.body;
User.findOne({
// email: body.email
$or: [ { email: body.email },{ nickname: body.nickname } ]
}, function (err, data) {
if (err) {
return res.status(500).send('server error');
}
if (data) {
// 邮箱或者昵称已经存在
return res.status(200).send('email or nichname aleary exists.')
}
res.status(200).send('{"success": true}');
})
})
```