首页html 调用chatgpt api

html 调用chatgpt api

时间: 2023-10-31 14:06:01 浏览: 130

要使用 ChatGPT API，您需要先获得 API 的访问密钥。一般情况下，您可以在 API 提供商的网站上注册账号并获取访问密钥。一旦您获得了访问密钥，您可以使用 HTML 和 JavaScript 调用 ChatGPT API。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>ChatGPT API Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $("#btn-send").click(function() { var question = $("#input-question").val(); $.ajax({ type: "POST", url: "https://api.chatgpt.com/chat", headers: { "Authorization": "Bearer YOUR_API_KEY", "Content-Type": "application/json" }, data: JSON.stringify({question: question}), success: function(response) { $("#chat-history").append("<p class='user'>You: " + question + "</p>"); $("#chat-history").append("<p class='bot'>ChatGPT: " + response.answer + "</p>"); }, error: function(xhr, status, error) { alert("Error: " + error); } }); }); }); </script> <style> .user { color: blue; } .bot { color: green; } </style> </head> <body> <h1>ChatGPT API Demo</h1> <div id="chat-history"></div> <input type="text" id="input-question"> <button id="btn-send">Send</button> </body> </html> ``` 在这个示例中，我们使用了 jQuery 库来发送 AJAX 请求。当用户点击“发送”按钮时，我们将用户输入的问题发送到 ChatGPT API，并显示 API 返回的回答。请注意，您需要将 YOUR_API_KEY 替换为您的实际访问密钥。

阅读全文