jQuery實(shí)現(xiàn)Ajax聊天機(jī)器人完成案例
更新時(shí)間：2021年11月22日 11:31:29 作者：小白小白從不日白
從微信開(kāi)發(fā)的時(shí)候,有了一個(gè)與人對(duì)話(huà)的機(jī)器人之后，本文主要實(shí)現(xiàn)jQuery實(shí)現(xiàn)Ajax聊天機(jī)器人完成案例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
聊天機(jī)器人可以省掉很多人工方面的問(wèn)題，在很多時(shí)候都可以用到，例如客服，天氣回復(fù)等問(wèn)題，本文就詳細(xì)的介紹一下jQuery Ajax聊天機(jī)器人，具體如下：
'
實(shí)現(xiàn)步驟：
1.梳理案例的代碼結(jié)構(gòu)
a.梳理頁(yè)面的UI布局
b.將業(yè)務(wù)代碼抽離到chat.js中
c.了解resetui()函數(shù)的作用：重置滾動(dòng)條的位置
<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">
<h3>小向同學(xué)</h3>
<img src="images/person01.png" alt="icon" />
</div>
<!-- 聊天內(nèi)容區(qū)域 -->
<div class="main">
<ul class="talk_list" style="top: 0px" id="talk_list">
<li class="left_word">
<img src="images/person01.png" /> <span>嗨，最近想我沒(méi)有？</span>
</li>
<!-- <li class="right_word">
<img src="images/person02.png" /> <span>你好哦</span>
</li> -->
</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>
<!-- 播放語(yǔ)音 -->
<audio src="" id="voice" autoplay style="display: none;"></audio>
<!-- 消息編輯區(qū)域 -->
<div class="footer">
<img src="images/person02.png" alt="">
<input type="text" placeholder="說(shuō)點(diǎn)什么吧..." class="input_txt" id="ipt" />
<input type="button" value="發(fā) 送" class="input_sub" id="btnSend">
</div>
</div>
<!-- 實(shí)現(xiàn)頁(yè)面滾動(dòng) -->
<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 h3 {
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.將用戶(hù)輸入的內(nèi)容渲染到聊天窗口
chat.js，
//重置滾動(dòng)條位置
resetui();
//為發(fā)送按鈕綁定鼠標(biāo)點(diǎn)擊事件
$("#btnSend").on('click', function () {
let text = $("#ipt").val().trim(); //要發(fā)送的內(nèi)容
// 判斷發(fā)送的內(nèi)容是是否為空
if (text.length <= 0) {
return $("#ipt").val('');
}
//如果用戶(hù)輸入了聊天內(nèi)容，則將聊天內(nèi)容追加到頁(yè)面上顯示
$("#talk_list").append(`<li class="right_word"><img src="images/person02.png" /> <span>${text}</span></li>`);
//發(fā)送完后清空輸入框
$("#ipt").val('');
//重置滾動(dòng)條位置
resetui();
});
3.發(fā)起請(qǐng)求獲取聊天消息
chat.js， ?
//定義函數(shù)向服務(wù)器請(qǐng)求數(shù)據(jù)--獲取聊天機(jī)器人發(fā)送回來(lái)的數(shù)據(jù)
function getMsg(text){
$.ajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/robot',
data: {// 將用戶(hù)放送的消息提交到服務(wù)器
spoken: text
},
success: function(res){
// console.log(res);
//判斷是否請(qǐng)求成功 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>`);
//重置滾動(dòng)條位置
resetui();
}
}
})
}
4.將機(jī)器人的聊天內(nèi)容轉(zhuǎn)為語(yǔ)音
5.通過(guò)<audio>播放語(yǔ)音
//將機(jī)器人的聊天內(nèi)容轉(zhuǎn)換為語(yǔ)音
function getVoice(text){
$.ajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/synthesize',
data: {
text: text
},
success: function(res){
// console.log(res);
//判斷是否請(qǐng)求成功
if(res.status === 200){
//播放語(yǔ)音
$("#voice").attr("src",res.voiceUrl);
}
}
})
}
6.使用回車(chē)鍵發(fā)送消息
//給文本輸入框綁定事件--當(dāng)按下并抬起回車(chē)鍵時(shí)自動(dòng)發(fā)送聊天內(nèi)容
$("#ipt").on('keyup',function(e){
// console.log(e.keyCode); // 13
//判斷用戶(hù)是否按下的是回車(chē)鍵
if(e.keyCode === 13){
//調(diào)用按鈕元素的 click 函數(shù)，將其內(nèi)容發(fā)送出去
$("#btnSend").click();
}
})
到此這篇關(guān)于jQuery實(shí)現(xiàn)Ajax聊天機(jī)器人完成案例的文章就介紹到這了,更多相關(guān)jQuery Ajax聊天機(jī)器人內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天總結(jié)一下學(xué)習(xí)jQuery時(shí)中遇到的一些常用的jQuery代碼，這些代碼片段可能在我們急需的時(shí)候能起到幫助。2011-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery下拉框的簡(jiǎn)單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家詳細(xì)介紹了jquery添加div實(shí)現(xiàn)消息聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
jquery Moblie入門(mén)—hello world的示例代碼學(xué)習(xí)
jquery Moblie入門(mén)：Hello World的示例代碼學(xué)習(xí)，感興趣的朋友可以了解下哦2013-01-01
jquery加載頁(yè)面的方法(頁(yè)面加載完成就執(zhí)行)
jquery加載頁(yè)面的方法(頁(yè)面加載完成就執(zhí)行),建議大家看下windows.onload與$(document).ready之間的區(qū)別。2011-06-06
模擬jQuery中的ready方法及實(shí)現(xiàn)按需加載css,js實(shí)例代碼
這篇文章介紹了模擬jQuery中的ready方法及實(shí)現(xiàn)按需加載css,js實(shí)例代碼，有需要的朋友可以參考一下2013-09-09
jQuery判斷郵箱格式對(duì)錯(cuò)實(shí)例代碼講解
本文通過(guò)實(shí)例代碼給大家講解了基于jquery判斷郵箱格式對(duì)錯(cuò)，非常實(shí)用，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-04-04
jquery實(shí)現(xiàn)垂直手風(fēng)琴導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)垂直手風(fēng)琴導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了Jquery 實(shí)現(xiàn)圖片輪換,雖然還有點(diǎn)小問(wèn)題，但是影響不大，還是推薦給大家，需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery基于事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)元素顯示與隱藏功能的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12