fetch 呼叫 WolframAlpha API

日期：

 了解了！

你想要做的是：寫一個 HTML 網頁，這個網頁裡有一個輸入框，使用者可以輸入數學問題，然後用 WolframAlpha API 去查詢答案，最後把答案顯示在網頁上，對吧？

好的，我幫你設計一個簡單版本，可以直接拿去測試。
這個版本會用到：

  • HTML + JavaScript

  • fetch 呼叫 WolframAlpha API

👉 以下是完整的範例：
（我先假設你已經有 WolframAlpha 的 API Key，如果還沒有，可以去官方申請一個）

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>數學專家 (WolframAlpha)</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
    }
    input, button {
      font-size: 1rem;
      padding: 8px;
      margin-right: 10px;
    }
    #result {
      margin-top: 20px;
      font-size: 1.2rem;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>

  <h1>數學專家 (WolframAlpha)</h1>
  <p>請輸入數學問題：</p>
  <input type="text" id="query" placeholder="例如：integrate x^2" size="50">
  <button onclick="askWolfram()">查詢</button>

  <div id="result"></div>

  <script>
    const appId = '你的API金鑰'; // <- 把這裡換成你的 WolframAlpha AppID

    async function askWolfram() {
      const query = document.getElementById('query').value;
      const resultDiv = document.getElementById('result');

      if (!query.trim()) {
        resultDiv.textContent = '請輸入一個問題！';
        return;
      }

      resultDiv.textContent = '查詢中，請稍候...';

      try {
        const apiUrl = `https://api.wolframalpha.com/v1/result?i=${encodeURIComponent(query)}&appid=${appId}`;

        const response = await fetch(apiUrl);
        if (!response.ok) {
          throw new Error('無法取得結果');
        }

        const text = await response.text();
        resultDiv.textContent = `解答：\n${text}`;

      } catch (error) {
        resultDiv.textContent = `發生錯誤：${error.message}`;
      }
    }
  </script>

</body>
</html>

🔥 說明

  • 使用者輸入問題 → 按下「查詢」按鈕

  • JavaScript 用 fetch 呼叫 https://api.wolframalpha.com/v1/result

  • 這個 API 回傳的是「純文字答案」（不是複雜圖片）

  • 顯示在頁面上

✅ 注意

  • 這個範例用的是 WolframAlpha 的 Simple API (v1/result) ，只會拿到簡單文字答案。

  • 如果要更完整、拿到圖片結果或分步驟解題，可以改用更進階的 API，例如 Full Results API，但會複雜一點點，需要處理 XML 或 JSON 回傳內容。

要不要我也順便幫你做一個「進階版」，可以顯示 WolframAlpha 回傳的圖片（像是微分積分的步驟圖）呢？🎯
如果要的話跟我說：「我要進階版！」我幫你直接升級。🚀