📌  相关文章
📜  带有 api 的传统文本在反应中翻译谷歌 - Javascript (1)

📅  最后修改于: 2023-12-03 15:09:43.023000             🧑  作者: Mango

使用带有谷歌 API 的 JavaScript 进行反应翻译

如果您正在构建一个需要翻译文本的网站或应用程序，则可以使用Google翻译API来轻松高效地完成该任务。在这个专题中，我们将使用JavaScript来构建一个简单的翻译应用程序，并在其中集成谷歌翻译API。

步骤 1 - 获取Google API密钥

首先，我们需要在Google Cloud平台上创建一个项目，并获取一个API密钥，以便我们的JavaScript应用程序可以与Google进行通信。

  1. 转到 Google Cloud 控制台（https://console.cloud.google.com/）。
  2. 如果您没有帐户，请创建一个新的Google帐户，然后登录。
  3. 创建一个新的项目，并按照屏幕上的说明进行操作。
  4. 启用谷歌翻译API，并获取API密钥。
步骤 2 - 编写 JavaScript 代码

现在我们已经准备好获取API密钥并将其用于我们的JavaScript应用程序中，让我们开始编写我们的代码。我们将使用jQuery来处理用户输入和根据API响应更新DOM元素。以下是我们的代码片段：

// 输入框和按钮元素
var input = $('input');
var translateBtn = $('button');

// 监听翻译按钮的点击事件
translateBtn.on('click', translateText);

// 翻译函数
function translateText() {
  var apiKey = 'YOUR_API_KEY_HERE'; // 替换为您的API密钥
  var text = input.val();
  var targetLang = 'fr'; // 目标语言（这里是法语）

  // 发送 GET 请求
  $.get('https://translation.googleapis.com/language/translate/v2', {
    key: apiKey,
    q: text,
    target: targetLang
  }, function(data) {
    // 更新 DOM 元素
    $('#output').text(data.data.translations[0].translatedText);
  });
}
步骤 3 - 将代码嵌入 HTML 页面

现在我们已经编写了我们的JavaScript代码，让我们将其嵌入到一个HTML页面中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google 翻译应用程序</title>
  </head>
  <body>
    <h1>Google 翻译应用程序</h1>
    <label>输入要翻译的文本：</label>
    <input type="text">
    <br>
    <button>翻译</button>
    <br>
    <label>翻译结果：</label>
    <div id="output"></div>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 引入我们的 JavaScript 代码 -->
    <script src="app.js"></script>
  </body>
</html>
总结

现在，我们已经展示了如何使用JavaScript编写一个带有谷歌API的简单翻译应用程序。请注意，此示例仅演示了如何将Google翻译API集成到JavaScript中，并不代表最佳实践或完整应用程序。我们希望这对您有帮助，并且您可以将学到的知识用于自己的项目中。