Ajax-02

今天內容：

• 安裝瀏覽器插件

• 聊天機器人案例

• Form表單提交

• 模板引擎（新的概念，難點）

• 兩個案例

Chrome瀏覽器插件安裝

安裝步驟

下載插件的網站：

• https://www.gugeapps.net/ 無需掃碼

• http://www.cnplugins.com/ 需要掃二維碼驗證

• 從上述兩個網站下載的插件，和從Chrome商店下載的插件是一樣的。只不過Chrome商店被和諧了，打不開。

如何安裝使用插件

• 下載下來的插件形如 JSONView.crx。可以把后綴換成 zip
• 使用解壓軟件解壓它，得到一個文件夾

• Chrome --> 更多工具 --> 擴展程序 --> 打開開發者模式 --> 加載已解壓的擴展程序 --> 選擇上一步解壓得到的文件夾

• 最終效果

jsonview插件

美化JSON的插件

postman

測試接口的工具

聊天機器人案例

案例演示與分析

• 聊天的時候，每個人說的話，用一 <li> 標簽標示
  • 小思同學說的話，<li class="left_word">
  • 我們說的話，<li class="right_word">
• 后面有一個 <audio src=""> ，用于播放語音，我們只需要設置src屬性為一個音頻文件地址即可自動播放
• 需要我們手動加載 scroll.js ，它里面封裝的一個函數 resetui() ，用于重置聊天區的滾動條。

渲染自己說的話

點擊發送按鈕的時候，獲取輸入框的值，然后調用函數。

// 單擊事件
// 給 發送 注冊單擊事件 $('#btnSend').on('click', function () {// 1. 渲染自己說的話let myWord = $('#ipt').val().trim(); // 取得輸入框的值renderMyWord(myWord);// 2. 得到對方的回應，并渲染到頁面中// 3. 播放語音});

// 封裝一個函數，渲染自己說的話function renderMyWord (myWord) {let str = `<li class="right_word"><img src="img/person02.png" /> <span>${myWord}</span></li>`;// 把str放到ul后面$('#talk_list').append(str);// 清空輸入框的內容$('#ipt').val('');// 重置滾動條，否則后面說的話看不見了resetui(); // scroll.js 里面封裝的函數，作用是可以重置滾動條// 渲染機器人的回應renderRobotWord(myWord);}

獲取并渲染機器人說的話

// 獲取機器人的回應，并渲染到頁面中function renderRobotWord (myWord) {// 按照接口文檔，發送ajax請求。獲取機器人的回應$.get('http://www.liulongbin.top:3006/api/robot', {spoken: myWord}, function (res) {// console.log(res);if (res.message === 'success') {// 組裝一個li標簽。把機器人的回應渲染到頁面中let str = `<li class="left_word"><img src="img/person01.png" /> <span>${res.data.info.text}</span></li>`;// 把str追加到ul中$('#talk_list').append(str);// 重置滾動條resetui();// 調用把文字轉成語音的函數playVoice(res.data.info.text);}});}

把機器人說的話轉成語音

// 播放語音function playVoice (text) {$.get('http://www.liulongbin.top:3006/api/synthesize', {text: text}, function (res) {// console.log(res);if (res.status === 200) {// 設置 audio 標簽的src屬性$('#voice').attr('src', res.voiceUrl);}});}

輸入框按回車和點擊發送一樣的效果

// 優化 - 在輸入框里按回車，也能夠發送（讓按回車的效果和點擊發送按鈕的效果一樣）$('#ipt').keyup(function (e) {// 鍵盤彈起之后，觸發的函數// 獲取鍵盤的keyCode值// let keyCode = e.keyCode; // jQuery封裝的屬性，可以獲取到鍵盤的keyCodelet keyCode = e.which; // jQuery封裝的屬性，也可以獲取到鍵盤的keyCode// 判斷，是否按的是回車鍵if (keyCode === 13) {// 說明按了回車鍵// 解決方案一：renderMyWord($(this).val().trim());// 解決方案二：觸發 發送按鈕的單擊事件// $('#btnSend').click(); // $('#btnSend').trigger('click');}});

attr和prop

prop適合用在屬性的值是布爾值的情況下。比如：

• <input readonly />
• <input type="checkbox" checked />
• <input type="radio" checked />
• <input disabled />
• <select> <option selected></option> </select>

除此之外，其他的任何屬性都用 attr();

表單的組成

• form標簽

• 表單域

  • input type=“text”
  • input type=“password”
  • input type=“checkbox”
  • input type=“radio”
  • input type=“file” 文件域
  • input type=“hidden” 隱藏域
  • select>option
  • textarea 多行文本域

• 按鈕

  <!--下面的按鈕 會 造成表單的提交-->
  <button> 提交 </button>   ====  <button  type="submit"></button>   ====   <input type="submit" value="提交" /><!--下面的按鈕 不會 造成表單的提交-->
  <button  type="button">提交<button>  =====   <input type="button" value="提交" />
  

form標簽的屬性

<!--- 
action 屬性，表示表單提交的地址，默認空，表示提交到當前頁面
method 屬性，表示提交方式，可選GET和POST，默認是GET
--->
<form action="http://www.liulongbin.top:3006/api/addbook" method="POST"><input type="text" name="username"><br><button type="submit">提交</button>
</form>

提前了解：

• GET方式提交表單，我們輸入的值(請求參數)會拼接到url后面。
• POST方式提交表單，請求參數，不會拼接到url上。

推薦的提交表單的方案

• 監聽表單的提交事件
• 阻止表單提交（阻止標簽的默認行為）
• 使用JS代碼來收集表單數據
• 將收集到的數據，通過ajax來提交

使用jQuery提供的方法來快速收集表單數據

• $('form').serialize(); – 得到一個字符串

  bookname=aaa&author=bbb&publisher=ccc
  

• $('form').serializeArray(); – 得到一個數組

  [{name: 'bookname', value: 'aaa'},{name: 'author', value: 'bbb'},{name: 'publisher', value: 'ccc'}
  ]
  

細節問題：

• 表單域必須指定name屬性。否則，serialize或serializeArray不會收集到值
• 使用serialize和serializeArray得到的結果，可以直接作為ajax請求的data使用。

評論案例

略

監聽表單提交事件說明

監聽表單提交事件，可以有下面兩種寫法：

• $('form').submit(事件處理函數) — 推薦方案
• $('提交按鈕').click(事件處理函數);

模板引擎簡介

• 字符串大量拼接的問題

  • 性能及其低下
  • 結構上，html和js代碼混合到一起了

• 解決辦法

  • 模板引擎

• 模板引擎

  • 模板引擎，可以把 模板結構 和 數據組合到一起，形成最終的html頁面

art-tempalte模板引擎的使用步驟

1. 加載 template-web.js
2. 設置模板（就是我們前面寫好的HTML頁面）
   • 模板要使用script標簽包裹
   • 指定script標簽的type=“text/html"
   • 指定script標簽的id=”值“
3. 有數據了，然后調用 template函數，完成模板和數據的組合
   • 數據可以自己模擬，真實情況，數據一般都是ajax請求返回的數據
   • template函數
     • 參數1：模板的id
     • 參數2：要展示的數據，使用JS對象形式的數據
     • 返回值：模板和數據組合好的結果
4. 把組合好的結果，放到頁面中
5. 最后，使用 {{title}} 這樣的模板語法，指定數據展示的位置。

模板語法

• 原樣輸出 - 適用于 直接顯示標簽的樣式，而不是使用實體符合

  • {{@title}}

• 直接輸出

  • {{name}}

• 條件判斷

  {{if  條件}}
  xxx
  {{else}}
  yyy
  {{/if}}
  

• 循環

  {{each hobby val key}}{{val}}  --- 表示數組的值{{key}}  --- 表示數組的下標
  {{/each}}