在页面加载时&＃xff0c;就需要显示在页面上的数据&＃xff0c;可以在后台使用this.assign赋值&＃xff0c;在前台通过ejs等模板获取&＃xff1b;用户点击按钮&＃xff0c;或者触发某些事件和后台进行交互时&＃xff0c;就需要用到ajax调用后台接口。本文通过一个例子讲述这两种方法的前后台实现。&＃xff08;方便起见&＃xff0c;使用jQuery封装的ajax&＃xff09;&＃39;
&＃xff08;ps&＃xff1a;ajax调用后台接口的情形通常是用户触发事件&＃xff0c;给后台传递一些前台的数据&＃xff0c;然后后台根据这些数据进行相关操作&＃xff0c;再返回前台一些数据。举个表单提交的例子&＃xff0c;用户点击提交按钮之后&＃xff0c;将填写的表单信息传递个后台&＃xff0c;后台对传过来的表单信息进行验证&＃xff0c;并存储的数据库中&＃xff0c;如果这两个过程都成功完成&＃xff0c;返回前端一个true&＃xff0c;如果失败&＃xff0c;返回false。然后前端通过接收到的true和false给出用户相应的提示。&＃xff09;
一般网站都会有用户的个人中心&＃xff0c;用户可以通过填写表单修改个人信息&＃xff0c;下面就以此种情形为例。&＃xff08;user模块&＃xff0c;personal控制器&＃xff0c;index方法为页面显示&＃xff0c;update方法为更新个人信息&＃xff09;
this.assign配合模板传递数据
首先是前端HTML。一个个人信息的表单。/view/user/personal_index.html
<form><div class&＃61;"form-group"><label for&＃61;"inputNickname">Nicknamelabel><input type&＃61;"text" class&＃61;"form-control" id&＃61;"inputNickname" name&＃61;"inputNickname" value&＃61;"{{userInfo.user_name}}">div><div class&＃61;"form-group"><label for&＃61;"inputEmail">Emaillabel><input type&＃61;"Email" class&＃61;"form-control" id&＃61;"inputEmail" name&＃61;"inputEmail" value&＃61;"{{userInfo.user_mailbox}}">div><div class&＃61;"form-group"><label for&＃61;"inputTell">Tellphonelabel><input type&＃61;"number" class&＃61;"form-control" id&＃61;"inputTell" name&＃61;"inputTell" value&＃61;"{{userInfo.user_tellphone}}">div><div class&＃61;"form-group"><label for&＃61;"inputCity">Citylabel><input type&＃61;"text" class&＃61;"form-control" id&＃61;"inputCity" name&＃61;"inputCity" value&＃61;"{{userInfo.user_city}}">div><div class&＃61;"form-group"><label for&＃61;"">label><button type&＃61;"submit" class&＃61;"btn btn-primary">Update Your Informationbutton>div>form>
这里使用的是nunjucks模板&＃xff0c;打开这个页面时&＃xff0c;表单中应该显示用户已有的信息&＃xff0c;所以在/src/user/controller/personal.js的index方法里应该通过this.assign将用户信息赋给前台。
/src/user/controller/personal.js
async indexAction(){let userInfo &＃61; await this.session(&＃39;userInfo&＃39;);
return this.display();}
因为是用户信息是在用户登录时就获取到然后存在缓存里的&＃xff0c;所以这里是直接从缓存里获取&＃xff0c;如果没有获取到用户信息需要重新登录&＃xff0c;跳转到登录页面。如果用户信息存在就赋值给userInfo变量&＃xff0c;然后在前端的value中获取到这个变量的值。有一点需要注意的是&＃xff0c;使用模板时&＃xff0c;双括号需要写在双引号里面&＃xff0c;否则渲染出来获取到的值不在input的value里。&＃39;
Ajax传递数据&＃xff1a;
当用户修改表单中的值&＃xff0c;并点击提交按钮之后&＃xff0c;需要将这些数据传送的后台&＃xff0c;虽然可以直接在form的action属性里面写上后台的方法路径&＃xff0c;method里面指定提交的方式&＃xff0c;但是这种提交不便于获取返回的数据&＃xff0c;而且会进行页面跳转&＃xff0c;刷新等默认行为。所以通过ajax来传送数据&＃xff0c;并通过回调获取返回的数据就可以避免以上这些情况发生。
前端personal_index.html引用的js文件&＃xff1a;/www/static/js/personal.js
$(function(){$(&＃39;form&＃39;).submit(evt&＃61;>{evt.preventDefault();$.ajax({url: &＃39;/user/personal/update&＃39;,type: &＃39;POST&＃39;,dataType: &＃39;json&＃39;,data: $(&＃39;form&＃39;).serialize(),success:res&＃61;>{if(!res.errno) {alert(&＃39;Update Successfully&＃xff01;&＃39;);window.location.reload();}else alert(res.errmsg);}});});
});
form的submit事件就是默认的表单提交事件&＃xff0c;比如点击表单内type为submit的button或者input&＃xff0c;在输入框中按下回车等。evt代表当前的事件&＃xff0c;evt.preventDefault()就是阻止表单默认提交&＃xff08;通过form的action和method默认提交到对应方法&＃xff09;。然后通过ajax方法将表单信息传递给后台。ajax的使用方法如上面所示&＃xff0c;url写对应方法的地址&＃xff0c;形式就是&＃39;/模块名/控制器名/方法名&＃39;&＃xff0c;type是&＃39;POST&＃39;或者&＃39;GET&＃39;,dataType是数据类型&＃xff0c;这里是json&＃xff0c;data是传递的数据&＃xff0c;form可以简单的通过$(&＃39;form&＃39;).serialize()来获取到表单的所有数据&＃xff08;序列化返回的结果举例&＃xff1a;name&＃61;Kate&city&＃61;WuHan&＃xff0c;与表单默认提交一致&＃xff0c;input的name值和value值对应传给后台&＃xff09;。success是成功传给后台并且后台处理成功后的回调函数&＃xff0c;res就是后台的返回值&＃xff0c;如果成功&＃xff0c;那么弹出更新成功的提示框&＃xff0c;并且重新加载页面&＃xff0c;用户信息也会更新。如果失败&＃xff0c;那么弹出失败的提示框。
/src/user/controller/personal.js
async updateAction(){let formInfo &＃61; this.post();let userList &＃61; this.model(&＃39;user&＃39;);let list &＃61; this.model(&＃39;list&＃39;);let userInfo &＃61; await this.session(&＃39;userInfo&＃39;);let affectedRows &＃61; await userList.where({user_uid: userInfo.user_uid}).update({user_name:formInfo.inputNickname,user_mailbox:formInfo.inputEmail,user_tellphone:formInfo.inputTell,user_city:formInfo.inputCity});
//更新缓存let user &＃61; await userList.where({user_loginname: userInfo.user_loginname}).find();await this.session(&＃39;userInfo&＃39;,user);this.success();}
首先通过this.post()获取表单传过来的数据存到formInfo中&＃xff08;会转化成键值对的形式&＃xff0c;就是js中对象的形式&＃xff09;&＃xff0c;然后更新这个用户数据库中的数据&＃xff08;通过user_uid这个用户唯一标识查找到该用户信息&＃xff0c;并更新&＃xff09;&＃xff0c;再将更新后的信息存入缓存&＃xff08;注&＃xff1a;本文是拿用户信息举例&＃xff0c;所以要从缓存中读取&＃xff0c;并存入缓存&＃xff0c;其它情况可能并不需要使用session&＃xff09;&＃xff0c;如果有错或者没有成功改变&＃xff0c;那么通过this.fail返回&＃xff0c;前端回调函数获取到的res.errno为1000&＃xff0c;&＃39;update failed!&＃39;可以通过前端的res.errmsg获取到&＃xff0c; 完成之后通过this.success()返回&＃xff08;如需返回数据&＃xff0c;将数据作为this.success()的参数即可&＃xff0c;在前端回调中通过res.data获取到这个数据&＃xff09;&＃xff0c;前端回调获取到的res.errno为0。所以在前端js文件中ajax的success回调函数里&＃xff0c;只需要判断res.errno即可知道后台执行相关操作的成功与否。
注&＃xff1a;this.success和this.fail的用法参照https://thinkjs.org/zh-cn/doc/2.2/controller.html#toc-c6a和https://thinkjs.org/zh-cn/doc/2.2/controller.html#toc-060
京公网安备 11010802041100号