我正在开发一个聊天机器人,并遇到一些问题,通过单击 send 按钮,假设可以获得 json 训练数据,但 send 按钮不起作用。 在此输入图片描述
代码:app.js
class Chatbox {
constructor() {
this.args = {
openButton: document.querySelector('.chatbox__button'),
chatBox: document.querySelector('.chatbox__support'),
sendButton: document.querySelector('.send__button')
}
this.state = false;
this.messages = [];
}
display() {
const {openButton, chatBox, sendButton} = this.args;
this.prompt(chatBox)
openButton.addEventListener('click', () => this.toggleState(chatBox))
sendButton.addEventListener('click', () => this.onSendButton(chatBox))
const node = chatBox.querySelector('input');
node.addEventListener("keyup", ({key}) => {
if (key === "Enter") {
this.onSendButton(chatBox)
}
})
}
prompt(chatbox) {
this.messages.push({ name: "Bot", message: "I am Bot, and I can help answer your simple queries." });
this.updateChatText(chatbox)
}
toggleState(chatbox) {
this.state = !this.state;
// show or hides the box
if(this.state) {
chatbox.classList.add('chatbox--active')
} else {
chatbox.classList.remove('chatbox--active')
}
}
onSendButton(chatbox) {
var textField = chatbox.querySelector('input');
let text1 = textField.value
if (text1 === "") {
return;
}
let msg1 = { name: "User", message: text1 }
this.messages.push(msg1);
fetch($SCRIPT_ROOT + '/predict', {
method: 'POST',
body: JSON.stringify({ message: text1 }),
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
})
.then(r => r.json())
.then(r => {
let msg2 = { name: "Bot", message: r.answer };
this.messages.push(msg2);
this.updateChatText(chatbox)
textField.value = ''
}).catch((error) => {
console.error('Error:', error);
this.updateChatText(chatbox)
textField.value = ''
});
}
updateChatText(chatbox) {
var html = '';
this.messages.slice().reverse().forEach(function(item, index) {
if (item.name === "Bot")
{
html += '<div class="messages__item messages__item--visitor">' + item.message + '</div>'
}
else
{
html += '<div class="messages__item messages__item--operator">' + item.message + '</div>'
}
});
const chatmessage = chatbox.querySelector('.chatbox__messages');
chatmessage.innerHTML = html;
}
}
const chatbox = new Chatbox();
chatbox.display();
下面的$SCRIPT_ROOT有问题。
未捕获的引用错误:$SCRIPT_ROOT 未定义 在 Chatbox.onSendButton (app.js:55:15) 在 HTMLInputElement 处。 (app.js:25:22)
任何人都可以帮我解决这个问题,我尝试了一些方法但没有帮助。
你有线
fetch($SCRIPT_ROOT + '/predict', {
这里使用的是未定义的变量
$SCRIPT_ROOT
您之前将其放入脚本中:
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
如果您是 Windows 用户并且在代码 html 中您有此代码
$SCRIPT_ROOT = {{ request.script_root }};
解决方案很容易改变:
$SCRIPT_ROOT = {{ request.script_root }};
对此:
<script>
var SCRIPT_ROOT = "{{ SCRIPT_ROOT }}";
console.log("SCRIPT_ROOT:", SCRIPT_ROOT);
</script>
并确保位置正确