thinkjs學習-this.assign傳遞資料和ajax調用後台介面

標籤：reload   rms   src   個人資訊   cte   類型   function   地址   賦值   

在頁面載入時，就需要顯示在頁面上的資料，可以在後台使用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

原文地址：http://www.cnblogs.com/katelee/p/7469114.html

thinkjs學習-this.assign傳遞資料和ajax調用後台介面