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}');
})
})
```