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