多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
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}'); }) }) ```