thinkjs学习-this.assign传递数据和ajax调用后台接口

Posted Kate_Lee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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\');
      if (think.isEmpty(userInfo)) {
        this.redirect(\'/user/login/index\');
      }
      this.assign(\'userInfo\',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});
      if(!affectedRows){ this.fail(1000,\'update failed!\'); }
    //更新缓存
    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调用后台接口的主要内容,如果未能解决你的问题,请参考以下文章

thinkjs中修改默认主键

ThinkJS安装

thinkjs——修改where默认条件为or

thinkjs——两表联查

ThinkJS框架入门详细教程新手入门项目

thinkjs——一个字段一种数字代表两种状态