您好,登錄后才能下訂單哦!
小編給大家分享一下jQuery如何實現(xiàn)Ajax聊天機器人,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
具體如下:
'
1.梳理案例的代碼結(jié)構(gòu)
a.梳理頁面的UI布局
b.將業(yè)務(wù)代碼抽離到chat.js中
c.了解resetui()函數(shù)的作用:重置滾動條的位置
<link rel="stylesheet" href="css/reset.css" rel="external nofollow" /> <link rel="stylesheet" href="css/index.css" rel="external nofollow" /> <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>
<div class="wrap"> <!--頭部區(qū)域--> <div class="header"> <h4>小向同學(xué)</h4> <img src="images/person01.png" alt="icon" /> </div> <!-- 聊天內(nèi)容區(qū)域 --> <div class="main"> <ul class="talk_list" id="talk_list"> <li class="left_word"> <img src="images/person01.png" /> <span>嗨,最近想我沒有?</span> </li> <!-- <li class="right_word"> <img src="images/person02.png" /> <span>你好哦</span> </li> --> </ul> <div class="drag_bar" > <div class="drager ui-draggable ui-draggable-handle" ></div> </div> </div> <!-- 播放語音 --> <audio src="" id="voice" autoplay ></audio> <!-- 消息編輯區(qū)域 --> <div class="footer"> <img src="images/person02.png" alt=""> <input type="text" placeholder="說點什么吧..." class="input_txt" id="ipt" /> <input type="button" value="發(fā) 送" class="input_sub" id="btnSend"> </div> </div> <!-- 實現(xiàn)頁面滾動 --> <script src="js/scroll.js"></script> <script src="js/chat.js"></script>
index.css,
body { font-family: 'Microsoft YaHei'; } .wrap { position: fixed; width: 450px; left: 50%; margin-left: -225px; top: 20px; bottom: 20px; border: 1px solid #ebebeb; background-color: #fff; border-radius: 10px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .header { height: 55px; background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6)); overflow: hidden; } .header h4 { color: #faf3fc; line-height: 55px; font-weight: normal; float: left; letter-spacing: 2px; margin-left: 25px; font-size: 18px; text-shadow: 0px 0px 5px #944846; } .header img { float: right; margin: 7px 25px 0 0; border-radius: 20px; box-shadow: 0 0 5px #f7f2fe; } .main { position: absolute; left: 0; right: 0; top: 55px; bottom: 55px; background-color: #f4f3f3; box-sizing: border-box; padding: 10px 0; overflow: hidden; } .talk_list { position: absolute; width: 100%; left: 0px; top: 0px; } .talk_list li { overflow: hidden; margin: 20px 0px 30px; } .talk_list .left_word img { float: left; margin-left: 20px; } .talk_list .left_word span { float: left; background-color: #fe9697; padding: 10px 15px; max-width: 290px; border-radius: 12px; font-size: 16px; color: #fff; margin-left: 13px; position: relative; line-height: 24px; } .talk_list .left_word span:before { content: ''; position: absolute; left: -8px; top: 3px; width: 13px; height: 12px; background: url('../images/corner01.png') no-repeat; } .talk_list .right_word img { float: right; margin-right: 20px; } .talk_list .right_word span { float: right; background-color: #fff; padding: 10px 15px; max-width: 290px; border-radius: 12px; font-size: 16px; color: #000; margin-right: 13px; position: relative; line-height: 24px; } .talk_list .right_word span:before { content: ''; position: absolute; right: -8px; top: 3px; width: 13px; height: 12px; background: url('../images/corner02.png') no-repeat; } .drag_bar { position: absolute; right: 0px; top: 0px; background-color: #fff; height: 100%; width: 6px; box-sizing: border-box; border-bottom: 1px solid #f4f3f3; } .drager { position: absolute; left: 0px; top: 0px; background-color: #cdcdcd; height: 100px; width: 6px; border-radius: 3px; cursor: pointer; } .footer { width: 100%; height: 55px; left: 0px; bottom: 0px; background-color: #fff; position: absolute; } .footer img { float: left; margin: 8px 0 0 20px; } .input_txt { float: left; width: 270px; height: 37px; border: 0px; background-color: #f4f3f3; margin: 9px 0 0 20px; border-radius: 8px; padding: 0px; outline: none; text-indent: 15px; } .input_sub { float: left; width: 70px; height: 37px; border: 0px; background-color: #fe9697; margin: 9px 0 0 15px; border-radius: 8px; padding: 0px; outline: none; color: #fff; cursor: pointer; }
效果如下:
2.將用戶輸入的內(nèi)容渲染到聊天窗口
chat.js,
//重置滾動條位置 resetui(); //為發(fā)送按鈕綁定鼠標(biāo)點擊事件 $("#btnSend").on('click', function () { let text = $("#ipt").val().trim(); //要發(fā)送的內(nèi)容 // 判斷發(fā)送的內(nèi)容是是否為空 if (text.length <= 0) { return $("#ipt").val(''); } //如果用戶輸入了聊天內(nèi)容,則將聊天內(nèi)容追加到頁面上顯示 $("#talk_list").append(`<li class="right_word"><img src="images/person02.png" /> <span>${text}</span></li>`); //發(fā)送完后清空輸入框 $("#ipt").val(''); //重置滾動條位置 resetui(); });
3.發(fā)起請求獲取聊天消息
chat.js,
//定義函數(shù)向服務(wù)器請求數(shù)據(jù)--獲取聊天機器人發(fā)送回來的數(shù)據(jù) function getMsg(text){ $.ajax({ method: 'GET', url: 'http://www.liulongbin.top:3006/api/robot', data: {// 將用戶放送的消息提交到服務(wù)器 spoken: text }, success: function(res){ // console.log(res); //判斷是否請求成功 data.info.text if(res.message === "success"){ //接收服務(wù)器返回的聊天消息 let msg = res.data.info.text; // console.log(msg); //將服務(wù)器返回的聊天消息渲染到聊天界面 $("#talk_list").append(`<li class="left_word"><img src="images/person01.png" /> <span>${msg}</span></li>`); //重置滾動條位置 resetui(); } } }) }
4.將機器人的聊天內(nèi)容轉(zhuǎn)為語音
5.通過<audio>播放語音
//將機器人的聊天內(nèi)容轉(zhuǎn)換為語音 function getVoice(text){ $.ajax({ method: 'GET', url: 'http://www.liulongbin.top:3006/api/synthesize', data: { text: text }, success: function(res){ // console.log(res); //判斷是否請求成功 if(res.status === 200){ //播放語音 $("#voice").attr("src",res.voiceUrl); } } }) }
6.使用回車鍵發(fā)送消息
//給文本輸入框綁定事件--當(dāng)按下并抬起回車鍵時自動發(fā)送聊天內(nèi)容 $("#ipt").on('keyup',function(e){ // console.log(e.keyCode); // 13 //判斷用戶是否按下的是回車鍵 if(e.keyCode === 13){ //調(diào)用按鈕元素的 click 函數(shù),將其內(nèi)容發(fā)送出去 $("#btnSend").click(); } })
看完了這篇文章,相信你對“jQuery如何實現(xiàn)Ajax聊天機器人”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。