複習 - ajax_ZenDei技術網路在線

複習呢有一個很直觀的感受，就是以前學的東西，萌懂半懂的，這一來全部都清楚了，你以前以為你學的並不好但是複習一次把以前的案例一做，居然能夠自己獨立完成，知識點看著掌握的還不錯。 1. 兩天時間就把整個ajax複習完了，一天目前還暫時做不到哈哈，確實還是有很多案例都要思考一會，直接從案例下手吧，一個圖書 ...

複習呢有一個很直觀的感受，就是以前學的東西，萌懂半懂的，這一來全部都清楚了，你以前以為你學的並不好但是複習一次把以前的案例一做，居然能夠自己獨立完成，知識點看著掌握的還不錯。

兩天時間就把整個ajax複習完了，一天目前還暫時做不到哈哈，確實還是有很多案例都要思考一會，直接從案例下手吧，一個圖書管理的案例，在這個案例裡面吧就是用三個介面來獲取圖書，增加圖書，刪除圖書，在js方面沒多大問題，在html方面，還讓我多熟悉了下vscode快速編程bootstrap，直接bs3，form-inline類名可以讓每個表單項為行內塊元素，table-hover可以增加表格的每一行懸停效果。

獲取圖書列表：封裝為一個函數，通過ajax發起get請求，然後把拿到的數據通過foreach迴圈出來。

增加圖書列表：也是發起一起請求，然後要重新獲取一下列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <style>
        .panel-body {
            text-align: center;
        }
        .input-group {
            width: 30%;
            margin:  0 10px;
        }
        .panel {
            width: 90%;
            margin: 0 auto;
        }
        .table {
            width: 90%;
            margin: 15px auto 0;
        }
    </style>
</head>

<body>
    
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">添加新圖書</h3>
          </div>
          <!-- 1.添加了一個類名form-inline 可使裡面的表單元素變成行內塊元素 -->
          <div class="panel-body form-inline">
               <div class="input-group ">
                   <div class="input-group-addon">書名</div>
                   <input type="text" class="form-control bookname" id="exampleInputAmount" placeholder="請輸入書名">
               </div>
               <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control author" id="exampleInputAmount" placeholder="請輸入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control publisher"  id="exampleInputAmount" placeholder="請輸入出版社">
            </div>
               <button type="button" class="btn btn-primary">添加</button>
          </div>
    </div>
    
    <!-- 2.table-borderred可以為每一個表單元素增加邊框 table-hover 添加滑鼠滑過表單的懸停狀態 -->
    
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>書名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    
    

    <script src="./lib/jquery.js"></script>
    <script>
        /* $.get('http://www.liulongbin.top:3006/api/getbooks', res => {
            // console.log(res);
            if (res.status !== 200) return console.log(獲取數據失敗);
            let htmlStr = ''
            let str = ''
            res.data.forEach(item => {
                htmlStr = `<tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td><a href="javascript:;">刪除</a></td>
            </tr>`
            str += htmlStr
        })
        document.querySelector('tbody').innerHTML =  str
        }) */
        // 3.上面我自己的做的方法固然可以但是這裡既然是用的jq那就用jq的方法來實現
        function getBook() {
            $.ajax({
            method : 'get',
            url : 'http://www.liulongbin.top:3006/api/getbooks',
            success : res => {
                if (res.status !== 200) return alert('獲取數據失敗')
                // jq的迴圈方法
                // 註意這裡的i不能省略
                let arr = []
                $.each(res.data, (i, item) => {
                    arr.push(`<tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td><a href="javascript:;" data-id="${item.id}" class="del">刪除</a></td>
            </tr>`)
                })
                $('tbody').empty().append(arr.join(''))
        }})
        }
        getBook()
        // 刪除圖書模塊
        function delBook() {
            // 4.刪除圖書也要用到一個介面
           // 4.1註意這裡的jq的事件委托，在後代選擇器這裡，不管是寫id還是class還是標簽都不再需要$符號直接引號寫上來即可
           $('tbody').on('click', '.del' , function() {
                    // 這裡點誰就會觸發誰，用到了事件委托，說明現在每個a標簽上也有點擊事件了他們就是事件的調用者
                    // attr這個方法可以設置可以獲取屬性的值，刪除用removeAttr
                     let id = $(this).attr('data-id')
                     console.log(id);
                     $.get('http://www.liulongbin.top:3006/api/delbook', {id : id}, res => {
                         if (res.status !== 200) return alert('刪除失敗')
                         // 刪除成功刷新一下表格
                         getBook()
                     })
                })
        }
        delBook()
        // 添加圖書模塊
        function addBook() {
            $('.btn').on('click', function() {
                $.post('http://www.liulongbin.top:3006/api/addbook',{
                    bookname : $('.bookname').val(),
                    author : $('.author').val(),
                    publisher : $('.publisher').val()
                }, res => {
                    console.log(res);
                    if (res.status !== 201) return alert(res.msg)
                    getBook()
                    return alert(res.msg)
                })
            })
        }
        addBook()
    </script>
</body>
</html>

第二個是一個聊天機器人的案例，以前也說過這些案例，只是這次來做感想又深入了一步，這個案例分為了三步，先是把自己發的消息能夠渲染到聊天界面，然後添加一個resetui重置右側滾動條的函數，可以讓聊天界面跟著我們的剛發的消息走，然後把獲取機器人回覆消息封裝為一個函數，具體裡面是通過我們發的消息為一個參數然後去獲取請求，會給你傳回來一個參數，同時可以把這個參數以機器人回覆的姿態渲染到聊天界面，最後就是語音播放功能，把機器人的消息作為一個參數封裝一個函數，html增加一個audio標簽，src就為我們這次請求的src，要加上網頁的一個根路徑哦

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <title>聊天機器人</title>
  </head>

  <body>
    <div class="wrap">
      <!-- 頭部 Header 區域 -->
      <div class="header">
        <h3>小思同學</h3>
        <img src="img/person01.png" alt="icon" />
      </div>
      <!-- 中間 聊天內容區域 -->
      <div class="main">
        <ul class="talk_list" style="top: 0px;">
       
          
        </ul>
        <div class="drag_bar" style="display: none;">
          <div
            class="drager ui-draggable ui-draggable-handle"
            style="display: none; height: 412.628px;"
          ></div>
        </div>
      </div>
      <!-- 底部 消息編輯區域 -->
      <div class="footer">
        <img src="img/person02.png" alt="icon" />
        <input type="text" placeholder="說的什麼吧..." class="input_txt" />
        <input type="button" value="發 送" class="input_sub" />
      </div>
    </div>
    <audio src="" autoplay></audio>
    <!-- <script type="text/javascript" src="./js/scroll.js"></script> -->
    <!-- <script>
      $(function(){
        // 初始化右側滾動條
        // 這個方法定義在scroll.js中
        resetui()
      })
      
    </script> -->
    <!-- 1.下麵兩個jq的js都是為了配合最後一個可以用resetui函數來初始化右側滾動條讓滾動條跟著屏幕內容走 -->
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/jquery-ui.min.js"></script>
    <script src="./js/jquery.mousewheel.js"></script>
    <script src="./js/scroll.js"></script>
    <script>
      // 先完成點擊發送添加消息功能
      let content = ''
      $('.input_sub').on('click', function() {
        content = $('.input_txt').val()
        if (content.trim() == '') return
        $('.talk_list').append(`<li class="right_word">
            <img src="img/person02.png" /> <span>${content}</span>
          </li>`
      )
      $('.input_txt').val('')
      resetui()
      getBoot(content)
    })
    // 機器人回覆
    // 2.註意這裡機器人的回覆是怎麼做到的 是再點擊後調用的這個函數
    function getBoot(text) {
      $.get('http://www.liulongbin.top:3006/api/robot',{spoken : text},res => {
      console.log(res);
      if (res.message == 'success') {
        $('.talk_list').append(`<li class="left_word">
            <img src="img/person01.png" /> <span>${res.data.info.text}</span>
          </li>`
      )
      }
      resetui(