Ajax-02

今天內(nèi)容：

• 安裝瀏覽器插件

• 聊天機(jī)器人案例

• Form表單提交

• 模板引擎（新的概念，難點(diǎn)）

• 兩個(gè)案例

Chrome瀏覽器插件安裝

安裝步驟

下載插件的網(wǎng)站：

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

• http://www.cnplugins.com/ 需要掃二維碼驗(yàn)證

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

如何安裝使用插件

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

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

• 最終效果

jsonview插件

美化JSON的插件

postman

測試接口的工具

聊天機(jī)器人案例

案例演示與分析

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

渲染自己說的話

點(diǎn)擊發(fā)送按鈕的時(shí)候，獲取輸入框的值，然后調(diào)用函數(shù)。

// 單擊事件 // 給 發(fā)送 注冊單擊事件 $('#btnSend').on('click', function () {// 1. 渲染自己說的話let myWord = $('#ipt').val().trim(); // 取得輸入框的值renderMyWord(myWord);// 2. 得到對方的回應(yīng)，并渲染到頁面中// 3. 播放語音}); // 封裝一個(gè)函數(shù)，渲染自己說的話function renderMyWord (myWord) {let str = `<li class="right_word"><img src="img/person02.png" /> <span>${myWord}</span></li>`;// 把str放到ul后面$('#talk_list').append(str);// 清空輸入框的內(nèi)容$('#ipt').val('');// 重置滾動條，否則后面說的話看不見了resetui(); // scroll.js 里面封裝的函數(shù)，作用是可以重置滾動條// 渲染機(jī)器人的回應(yīng)renderRobotWord(myWord);}

獲取并渲染機(jī)器人說的話

// 獲取機(jī)器人的回應(yīng)，并渲染到頁面中function renderRobotWord (myWord) {// 按照接口文檔，發(fā)送ajax請求。獲取機(jī)器人的回應(yīng)$.get('http://www.liulongbin.top:3006/api/robot', {spoken: myWord}, function (res) {// console.log(res);if (res.message === 'success') {// 組裝一個(gè)li標(biāo)簽。把機(jī)器人的回應(yīng)渲染到頁面中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();// 調(diào)用把文字轉(zhuǎn)成語音的函數(shù)playVoice(res.data.info.text);}});}

把機(jī)器人說的話轉(zhuǎn)成語音

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

輸入框按回車和點(diǎn)擊發(fā)送一樣的效果

// 優(yōu)化 - 在輸入框里按回車，也能夠發(fā)送（讓按回車的效果和點(diǎn)擊發(fā)送按鈕的效果一樣）$('#ipt').keyup(function (e) {// 鍵盤彈起之后，觸發(fā)的函數(shù)// 獲取鍵盤的keyCode值// let keyCode = e.keyCode; // jQuery封裝的屬性，可以獲取到鍵盤的keyCodelet keyCode = e.which; // jQuery封裝的屬性，也可以獲取到鍵盤的keyCode// 判斷，是否按的是回車鍵if (keyCode === 13) {// 說明按了回車鍵// 解決方案一：renderMyWord($(this).val().trim());// 解決方案二：觸發(fā) 發(fā)送按鈕的單擊事件// $('#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標(biāo)簽

• 表單域

  • 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標(biāo)簽的屬性

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

提前了解：

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

推薦的提交表單的方案

• 監(jiān)聽表單的提交事件
• 阻止表單提交（阻止標(biāo)簽的默認(rèn)行為）
• 使用JS代碼來收集表單數(shù)據(jù)
• 將收集到的數(shù)據(jù)，通過ajax來提交

使用jQuery提供的方法來快速收集表單數(shù)據(jù)

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

  bookname=aaa&author=bbb&publisher=ccc

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

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

細(xì)節(jié)問題：

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

評論案例

略

監(jiān)聽表單提交事件說明

監(jiān)聽表單提交事件，可以有下面兩種寫法：

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

模板引擎簡介

• 字符串大量拼接的問題

  • 性能及其低下
  • 結(jié)構(gòu)上，html和js代碼混合到一起了

• 解決辦法

  • 模板引擎

• 模板引擎

  • 模板引擎，可以把 模板結(jié)構(gòu) 和 數(shù)據(jù)組合到一起，形成最終的html頁面

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

加載 template-web.js

設(shè)置模板（就是我們前面寫好的HTML頁面）

• 模板要使用script標(biāo)簽包裹
• 指定script標(biāo)簽的type=“text/html"
• 指定script標(biāo)簽的id=”值“

有數(shù)據(jù)了，然后調(diào)用 template函數(shù)，完成模板和數(shù)據(jù)的組合

• 數(shù)據(jù)可以自己模擬，真實(shí)情況，數(shù)據(jù)一般都是ajax請求返回的數(shù)據(jù)
• template函數(shù)
  • 參數(shù)1：模板的id
  • 參數(shù)2：要展示的數(shù)據(jù)，使用JS對象形式的數(shù)據(jù)
  • 返回值：模板和數(shù)據(jù)組合好的結(jié)果

把組合好的結(jié)果，放到頁面中

最后，使用 {{title}} 這樣的模板語法，指定數(shù)據(jù)展示的位置。

模板語法

• 原樣輸出 - 適用于 直接顯示標(biāo)簽的樣式，而不是使用實(shí)體符合

  • {{@title}}

• 直接輸出

  • {{name}}

• 條件判斷

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

• 循環(huán)

  {{each hobby val key}}{{val}} --- 表示數(shù)組的值{{key}} --- 表示數(shù)組的下標(biāo) {{/each}}

總結(jié)

以上是生活随笔為你收集整理的Ajax — 第二天的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。