ChatGPT 实时聊天界面 - 使用 HTML 和 jQuery 实现 - 常规

<html>
<head>
    <title>ChatGPT 实时聊天界面</title>
    <!-- 加载jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h1>ChatGPT Demo</h1>
    <div class="response" id="response">
        <p>
            <span>ChatGPT: </span>
            Hi, I'm ChatGPT. Ask me anything!
        </p>
    </div>
    <form class="message-form" id="message-form">
        <input type="text" id="message" placeholder="Type your message here..." autocomplete="off" />
        <input type="submit" value="Send" />
    </form>
    <script>
        // 监听消息form的提交事件
        $('#message-form').on('submit', function(e) {
            e.preventDefault();
            // 发送用户输入的消息
            var message = $('#message').val();
            // 清空输入框
            $('#message').val('');
            // 发送消息
            sendMessage(message);
            // 更新屏幕，显示发送的消息
            updateResponse(message);
        });
<pre><code>    // 向服务器发送消息
    function sendMessage(message){
        // 使用AJAX发送消息
        $.post('/chatgpt/sendMessage', {message: message}, function(data, status){
            // 获取服务器返回的响应
            updateResponse(data.response);
        });
    }

    // 更新屏幕，显示响应的消息
    function updateResponse(response){
        var responseHTML = '&lt;p&gt;&lt;span&gt;ChatGPT: &lt;/span&gt;' + response + '&lt;/p&gt;';
        $('#response').append(responseHTML);
    }
&lt;/script&gt;
</code></pre>
</body>
</html>