利用Ajax实现智能回答的机器人

作者：System 时间：2024年08月07日分类：所有,ajax 字数：1337

这篇文章距离上次修改已过286天，其中的内容可能已经有所变动。

以下是一个简单的使用JavaScript和Ajax实现的智能机器人示例。这个示例假设你已经有了一个后端API，它接受用户的问题并返回一个智能回答。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能机器人</title>
    <script>
        function askQuestion() {
            var question = document.getElementById('question').value;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/api/get-answer', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('answer').innerText = response.answer;
                }
            };
            xhr.send(JSON.stringify({ question: question }));
        }
    </script>
</head>
<body>
    <h1>智能问答机器人</h1>
    <input type="text" id="question" placeholder="输入您的问题">
    <button onclick="askQuestion()">提问</button>
    <p id="answer"></p>
</body>
</html>

在这个例子中，当用户提交一个问题，askQuestion函数会被调用。这个函数创建一个新的XMLHttpRequest对象，向后端/api/get-answer发送一个POST请求，携带用户的问题。当请求完成并且响应成功返回后，机器人的回答会被显示在页面上的<p id="answer"></p>元素中。

确保你的后端API能够接收一个问题并返回适当的JSON响应，例如：




{
    "answer": "返回机器人生成的回答"
}

请注意，这只是一个非常基础的实现，你需要根据你的后端API的具体要求来调整这段代码。

利用Ajax实现智能回答的机器人

评论已关闭

推荐阅读