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