我让GPT生成一段前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<style>
.chat-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.chat-messages {
overflow-y: scroll;
flex: 1;
height: 100vh;
}
</style>
</head>
<body>
<div>
<div id="messages"></div> <!-- 用于显示对话内容 -->
<input type="text" id="messageInput"></input> <!-- 用于输入对话内容 -->
<button id="sendButton">发送</button> <!-- 用于发送对话内容的按钮 -->
</div>
<script>
const apiUrl = 'https://localhost';
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
sendButton.addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('POST', apiUrl);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
const messageDiv = document.createElement('div');
messageDiv.innerText = data;
messagesDiv.appendChild(messageDiv);
messageInput.value = '';
}
};
xhr.send(JSON.stringify({ message: messageInput.value }));
});
</script>
</body>
</html>
View Code
最开始 messageDiv.innerText = data.message;
但控制台:
修改： messageDiv.innerText = data;
而请求url注意是否加s，有证书认证。
测试请求url在服务器写成web api技术，这里是测试数据。启动时用vs iis启动的。
标签：const,前端,messageInput,messageDiv,xhr,GPT,document,data,代码 From： https://www.cnblogs.com/shiningleo007/p/17547207.html