thinkjs学习-this.assign传递数据和ajax调用后台接口
在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取;用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口。本文通过一个例子讲述这两种方法的前后台实现。(方便起见,使用jQuery封装的ajax)'
(ps:ajax调用后台接口的情形通常是用户触发事件,给后台传递一些前台的数据,然后后台根据这些数据进行相关操作,再返回前台一些数据。举个表单提交的例子,用户点击提交按钮之后,将填写的表单信息传递个后台,后台对传过来的表单信息进行验证,并存储的数据库中,如果这两个过程都成功完成,返回前端一个true,如果失败,返回false。然后前端通过接收到的true和false给出用户相应的提示。)
一般网站都会有用户的个人中心,用户可以通过填写表单修改个人信息,下面就以此种情形为例。(user模块,personal控制器,index方法为页面显示,update方法为更新个人信息)
this.assign配合模板传递数据
首先是前端HTML。一个个人信息的表单。/view/user/personal_index.html
<form>
<div class="form-group">
<label for="inputNickname">Nickname</label>
<input type="text" class="form-control" id="inputNickname" name="inputNickname" value="{{userInfo.user_name}}">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="Email" class="form-control" id="inputEmail" name="inputEmail" value="{{userInfo.user_mailbox}}">
</div>
<div class="form-group">
<label for="inputTell">Tellphone</label>
<input type="number" class="form-control" id="inputTell" name="inputTell" value="{{userInfo.user_tellphone}}">
</div>
<div class="form-group">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity" name="inputCity" value="{{userInfo.user_city}}">
</div>
<div class="form-group">
<label for=""></label>
<button type="submit" class="btn btn-primary">Update Your Information</button>
</div>
</form>
这里使用的是nunjucks模板,打开这个页面时,表单中应该显示用户已有的信息,所以在/src/user/controller/personal.js的index方法里应该通过this.assign将用户信息赋给前台。
/src/user/controller/personal.js
async indexAction(){
let userInfo = await this.session('userInfo');
return this.display();
}
因为是用户信息是在用户登录时就获取到然后存在缓存里的,所以这里是直接从缓存里获取,如果没有获取到用户信息需要重新登录,跳转到登录页面。如果用户信息存在就赋值给userInfo变量,然后在前端的value中获取到这个变量的值。有一点需要注意的是,使用模板时,双括号需要写在双引号里面,否则渲染出来获取到的值不在input的value里。'
Ajax传递数据:
当用户修改表单中的值,并点击提交按钮之后,需要将这些数据传送的后台,虽然可以直接在form的action属性里面写上后台的方法路径,method里面指定提交的方式,但是这种提交不便于获取返回的数据,而且会进行页面跳转,刷新等默认行为。所以通过ajax来传送数据,并通过回调获取返回的数据就可以避免以上这些情况发生。
前端personal_index.html引用的js文件:/www/static/js/personal.js
$(function(){
$('form').submit(evt=>{
evt.preventDefault();
$.ajax({
url: '/user/personal/update',
type: 'POST',
dataType: 'json',
data: $('form').serialize(),
success:res=>{
if(!res.errno) {
alert('Update Successfully!');
window.location.reload();
}
else alert(res.errmsg);
}
});
});
});
form的submit事件就是默认的表单提交事件,比如点击表单内type为submit的button或者input,在输入框中按下回车等。evt代表当前的事件,evt.preventDefault()就是阻止表单默认提交(通过form的action和method默认提交到对应方法)。然后通过ajax方法将表单信息传递给后台。ajax的使用方法如上面所示,url写对应方法的地址,形式就是'/模块名/控制器名/方法名',type是'POST'或者'GET',dataType是数据类型,这里是json,data是传递的数据,form可以简单的通过$('form').serialize()来获取到表单的所有数据(序列化返回的结果举例:name=Kate&city=WuHan,与表单默认提交一致,input的name值和value值对应传给后台)。success是成功传给后台并且后台处理成功后的回调函数,res就是后台的返回值,如果成功,那么弹出更新成功的提示框,并且重新加载页面,用户信息也会更新。如果失败,那么弹出失败的提示框。
/src/user/controller/personal.js
async updateAction(){
let formInfo = this.post();
let userList = this.model('user');
let list = this.model('list');
let userInfo = await this.session('userInfo');
let affectedRows = 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 = await userList.where({user_loginname: userInfo.user_loginname}).find();
await this.session('userInfo',user);
this.success();
}
首先通过this.post()获取表单传过来的数据存到formInfo中(会转化成键值对的形式,就是js中对象的形式),然后更新这个用户数据库中的数据(通过user_uid这个用户唯一标识查找到该用户信息,并更新),再将更新后的信息存入缓存(注:本文是拿用户信息举例,所以要从缓存中读取,并存入缓存,其它情况可能并不需要使用session),如果有错或者没有成功改变,那么通过this.fail返回,前端回调函数获取到的res.errno为1000,'update failed!'可以通过前端的res.errmsg获取到, 完成之后通过this.success()返回(如需返回数据,将数据作为this.success()的参数即可,在前端回调中通过res.data获取到这个数据),前端回调获取到的res.errno为0。所以在前端js文件中ajax的success回调函数里,只需要判断res.errno即可知道后台执行相关操作的成功与否。
注: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
thinkjs学习-this.assign传递数据和ajax调用后台接口的更多相关文章
- ajax 调用后台接口示例
$(function(){ var _del_time_list = $("select[name='del_time_list']"); var _del_table_name ...
- 通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上
第一步: 编写基础的 html 框架内容,并引入 jquery: <!doctype html> <html lang="en"> <head> ...
- MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合
MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合 1.基本数据类型 我们常见有传递 int, string, bool, double, decimal 等类型. 需要注意的是前台传递的参 ...
- asp.net如何在前台利用jquery Ajax调用后台方法
一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此 ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- 前后端通信中使用Ajax与后台接口api交互(以登录功能为例)
一.查阅开发文档 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据. 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Aj ...
- 仅用aspx文件实现Ajax调用后台cs程序。(实例)
仅用aspx文件实现Ajax调用后台cs无刷新程序.(实例) 两个文件:aaa.aspx 和aaa.aspx.cs 一.aaa.aspx <script type="text/java ...
- java 中使用ajax调用后台方法注意事项
java 中使用ajax调用后台方法注意事项,后台方法一定要加@ResponseBody jQuery.validator.addMethod("checkRuleName",fu ...
- Ajax调用WebService接口样例
在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...
随机推荐
- CODE大全——机器学习
聚类 聚类任务 背景 在无监督学习(密度估计.异常检测等)中,训练样本的标记信息是未知的(即不人为指定),旨在发现数据之间的内在联系和规律,为进一步的数据分析提供基础. 此类学习任务中研究最多.应用最 ...
- Go语言学习笔记(五)文件操作
加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 文件读取 os.File 封装了文件相关操作 type File File代表一个打开的文件对象. func Cr ...
- 【AngularJS】学习资料
1. http://www.cnblogs.com/lcllao/tag/AngularJs/ http://www.ituring.com.cn/article/13474 http://www.a ...
- 【jquery】获取元素高度
1. $("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)2. $("#div_id&q ...
- MVC 路由设置伪静态
public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/ ...
- opnet仿真过程中SEED的概念问题 分类: opnet 2014-11-02 15:25 69人阅读 评论(0) 收藏
仿真配置中SEED的概念:仿真随机种子,是产生随机数的种子值,反应随机数的状态.只要选定一个种子值,整个随机事件系统就固定了,复杂仿真的随机过程就成了一次实现.目的是测试仿真系统的稳健性,具体来说,针 ...
- springboot启动时报错No session repository could be auto-configured.....
具体异常提示: Error starting ApplicationContext. To display the auto-configuration report re-run your appl ...
- Java大数据人才应用领域广,就业薪酬高
互联网创造了大数据应用的规模化环境,大数据应用成功的案例大都是在互联网上发生的, 互联网业务提供了数据,互联网企业开发了处理软件,互联网企业的创新带来了大数据应用 的活跃,没有互联网便没有今天的大数据 ...
- PythonTip--一马当先--bfs
刚学python,小试牛刀 一马当先 讨论此题 | 解题报告 顶(39) (AC/Submit)Ratio(477|1829)26.08% 踩(1) 描述: 下过象棋的人都知道,马只能走'日'字形(包 ...
- HTML的学习笔记
一.HTML的概述(了解) a.html是什么 : hypertext markup language 超文本标记语言 超文本:音频,视频,图片称为超文本.. ...