如何使用 HTML 搭配 JavaScript 調用 API（以 OpenRouter API 為例）
在 HTML 中，通常需要使用 JavaScript（特別是 Fetch API 或 AJAX）來調用 API，因為 HTML 本身是靜態標記語言，無法直接發送 HTTP 請求。
步驟：
1. 準備 API 金鑰（若 API 需要身份驗證）
2. 使用 Fetch API 發送請求
3. 處理 API 回應
4. 在 HTML 中顯示結果
---
範例：使用 JavaScript 調用 OpenRouter API
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API 調用範例</title>
</head>
<body>
<h2>OpenRouter API 測試</h2>
<label for="userInput">輸入你的問題：</label>
<input type="text" id="userInput" placeholder="請輸入問題">
<button onclick="callAPI()">送出</button>
<h3>API 回應：</h3>
<pre id="apiResponse"></pre>
<script>
async function callAPI() {
const userInput = document.getElementById("userInput").value;
const apiKey = "your-api-key"; // 請替換為你的 OpenRouter API 金鑰
const apiUrl = "https://openrouter.ai/qwen/qwq-32b:free/api";
const requestBody = {
model: "qwen/qwq-32b",
messages: [{ role: "user", content: userInput }],
max_tokens: 100
};
try {
const response = await fetch(apiUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${apiKey}`
},
body: JSON.stringify(requestBody)
});
if (!response.ok) {
throw new Error(`HTTP 錯誤！狀態碼: ${response.status}`);
}
const data = await response.json();
document.getElementById("apiResponse").innerText = JSON.stringify(data, null, 2);
} catch (error) {
console.error("發生錯誤:", error);
document.getElementById("apiResponse").innerText = "發生錯誤：" + error.message;
}
}
</script>
</body>
</html>
---
說明
1. HTML 結構
包含一個輸入框 <input> 讓使用者輸入問題。
一個 <button> 讓使用者點擊後調用 API。
一個 <pre> 用來顯示 API 回應內容。
2. JavaScript fetch() 調用 API
透過 fetch(apiUrl, options) 發送 POST 請求到 OpenRouter API。
headers:
Content-Type: application/json：指定請求內容格式為 JSON。
Authorization: Bearer your-api-key：提供 API 金鑰（請替換）。
body:
model: 指定 API 模型（如 "qwen/qwq-32b"）。
messages: 傳送對話內容（可用於聊天機器人）。
max_tokens: 限制回應字數。
3. 錯誤處理
若 API 回應錯誤（如無效的 API 金鑰），catch 會捕獲錯誤，並顯示在網頁上。
---
如何使用這個程式？
1. 獲取 API 金鑰（請到 OpenRouter 官方網站申請）。
2. 將 your-api-key 替換為你的 API 金鑰。
3. 開啟 HTML 檔案（直接用瀏覽器開啟即可）。
4. 輸入問題並點擊按鈕，獲取 AI 回應！
這樣，你就能透過 HTML + JavaScript 調用 OpenRouter API 並顯示結果！