IT俱乐部 Ajax 利用Ajax实现智能回答的机器人示例代码

利用Ajax实现智能回答的机器人示例代码

发布: 2023年 3月 21日 525阅读

下图是效果（文章末尾有所有的源代码） 

一、实现人机交互步骤：

 获取dom元素，创建点击事件/键盘事件 将我说的话传进ajax服务器中，获取机器人说的话，then()中的数据找到 创建子节点追加并且渲染数据出来 每次说完了都滚动到对话框最下面来

① 获取dom元素，创建点击事件/键盘事件

1
2
3
4
5
6
7
8
9
10
const btn = document.querySelector('#btnSend')
const ipt = document.querySelector('#ipt')
ipt.addEventListener('keyup', function (e) {
  if (e.key === 'Enter') {
    btn.click()
  }
})
btn.addEventListener('click', () => {
  const val = ipt.value.trim()
  console.log(val);

②将我说的话传进ajax服务器中

1
2
3
4
axios.get('http://ajax-api.itheima.net/api/robot',{ params: { spoken: val}}).then(res => {
       console.log(res);//res本质是服务器响应的值
       console.log(res.data.data.info.text);
       const words = res.data.data.info.text

这是服务器响应数据返回的值所在的位置（res.data.data.info.text）

  ③创建子节点追加并且渲染数据出来

1
2
3
li.className = 'left_word'
       document.querySelector('#talk_list').appendChild(li)
       li.innerHTML = `<img decoding="async" src="lib/img/person01.png"><span>${words}</span>`

④ 每次说完了都滚动到对话框最下面来

1
document.querySelector('ul').scrollTop = document.querySelector('ul').scrollHeight

以上这是传入Ajax发送的数据渲染，我们发的val同理渲染

1
2
3
4
5
6
7
8
// 自己发的
const li = document.createElement('li')
li.className = 'right_word'
document.querySelector('#talk_list').appendChild(li)
li.innerHTML = `<img decoding="async" src="lib/img/person02.png"><span>${val}</span>`
ipt.value=''
// 滚动到页面最下面
document.querySelector('ul').scrollTop = document.querySelector('ul').scrollHeight

此时再进行校验下：

 二、以上的源码（图片素材不方便传，自己随便定义啦~）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
  <title>案例_问答机器人</title>
    body {
      margin: 0;
      font-family: 'Microsoft YaHei', sans-serif;
    }
  
    .wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      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;
      overflow: hidden;
    }
  
    .talk_list {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
  
    .talk_list li {
      overflow: hidden;
      margin: 20px 0px 30px;
      display: flex;
    }
  
    .talk_list .left_word {
      justify-content: flex-start;
    }
  
    .talk_list .left_word img {
      margin-left: 20px;
      width: 44px;
      height: 44px;
    }
  
    .talk_list .left_word span {
      background-color: #fe9697;
      padding: 10px 15px;
      border-radius: 12px;
      font-size: 16px;
      color: #fff;
      margin-left: 15px;
      margin-right: 20px;
      position: relative;
      line-height: 24px;
    }
  
    .talk_list .left_word span:before {
      content: '';
      position: absolute;
      left: -8px;
      top: 12px;
      width: 13px;
      height: 12px;
      background: url('../day01/lib/img/corner01.png') no-repeat;
    }
  
    .talk_list .right_word {
      justify-content: flex-end;
    }
  
    .talk_list .right_word img {
      margin-right: 20px;
      width: 44px;
      height: 44px;
    }
  
    .talk_list .right_word span {
      background-color: #fff;
      padding: 10px 15px;
      border-radius: 12px;
      font-size: 16px;
      color: #000;
      margin-right: 15px;
      margin-left: 20px;
      position: relative;
      line-height: 24px;
    }
  
    .talk_list .right_word span:before {
      content: '';
      position: absolute;
      right: -8px;
      top: 12px;
      width: 13px;
      height: 12px;
      background: url('../day01/lib/img/corner02.png') no-repeat;
    }
  
    .footer {
      width: 100%;
      height: 55px;
      left: 0px;
      bottom: 0px;
      background-color: #fff;
      position: absolute;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }
  
    .input_txt {
      height: 37px;
      border: 0px;
      background-color: #f4f3f3;
      border-radius: 8px;
      padding: 0px;
      margin: 0 10px;
      outline: none;
      text-indent: 15px;
      flex: 1;
    }
  
    .input_sub {
      width: 70px;
      height: 37px;
      border: 0px;
      background-color: #fe9697;
      margin: 0;
      border-radius: 8px;
      padding: 0px;
      outline: none;
      color: #fff;
      cursor: pointer;
    }
  <div class="wrap">
     
    <div class="header">
      <h3>小思同学</h3>
      <img decoding="async" src="lib/img/person01.png" alt="icon">
</div>
     
    <div class="main">
      <ul class="talk_list" id="talk_list">
 
</ul>
</div>
     
    <div class="footer">
      <img decoding="async" src="lib/img/person02.png" alt="icon">
</div>
  </div>
   
  
    /*
    实现人机交互步骤
    1.沟通：通过创建节点的方法获取我说的话并渲染出来
    2.将我说的话传进ajax服务器中
    3.获取机器人说的话并且渲染出来
    4.每次说完了都滚动到对话框最下面来
    */
  
    const btn = document.querySelector('#btnSend')
    const ipt = document.querySelector('#ipt')
    ipt.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        btn.click()
      }
    })
    btn.addEventListener('click', () => {
      const val = ipt.value.trim()
      console.log(val);
      axios.get('http://ajax-api.itheima.net/api/robot',{ params: { spoken: val}}).then(res => {
        console.log(res);//res本质是服务器响应的值
        console.log(res.data.data.info.text);
        const words = res.data.data.info.text
        const li = document.createElement('li')
        li.className = 'left_word'
        document.querySelector('#talk_list').appendChild(li)
        li.innerHTML = `<img decoding="async" src="lib/img/person01.png"> <span>${words}`
        // 滚动到页面最下面
        document.querySelector('ul').scrollTop = document.querySelector('ul').scrollHeight
      })
  
      // 自己发的
      const li = document.createElement('li')
      li.className = 'right_word'
      document.querySelector('#talk_list').appendChild(li)
      li.innerHTML = `<img decoding="async" src="lib/img/person02.png"> <span>${val}`
      ipt.value=''
      // 滚动到页面最下面
      document.querySelector('ul').scrollTop = document.querySelector('ul').scrollHeight
  
    })
  </span></span>

到此这篇关于利用Ajax实现智能回答的机器人的文章就介绍到这了,更多相关Ajax机器人内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/ajax/5754.html
78赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部