谷歌翻译/基本 Javascript 问题答案

【问题标题】：Google Translate / Basic Javascript issue谷歌翻译/基本 Javascript 问题
【发布时间】：2013-01-28 16:53:26
【问题描述】：

鉴于以下

    <textarea style="width: 150px; height: 150px" id="sourceText">Hello Justin how are you today?</textarea>
<textarea style="width: 150px; height: 150px" id="translation"></textarea>
<button id="translateMe" value="Translate!" onclick="translateThis();"></button>
<script>
  function translateText(response) {document.getElementById("translation").innerHTML += response.data.translations[0].translatedText;}
  function translateThis(){
      var sourceText = escape(document.getElementById("sourceText").innerHTML);
      var source = 'https://www.googleapis.com/language/translate/v2?key=MY_KEY_HERE&source=en&target=es&callback=translateText&q=' + sourceText;
      return source;
  }
</script>

如何连接这个按钮来处理将翻译文本放入翻译文本区的功能？

【问题讨论】：

你确定你不应该使用 ajax 从谷歌的 API 中获取一些东西吗？告诉我仅仅引用 URL 不会有什么好处？
可能，但我的 Javascript 太生锈了，我可能会陷入困境，你能详细说明一下吗？
正如我在回答中所说，Google URL 并不是要通过 Ajax 使用，而是使用 JSONP（或通过服务器端 REST API 调用）。

标签： javascript api google-translate

【解决方案1】：

你漏掉了一步。 “源”变量需要成为 HTML script 元素的 src 属性。

仔细查看他们的"getting started" 文档。

顺便说一句，其他人正在将您指向 AJAX，但这实际上行不通。由于 Google URL 未托管在您的网站上，因此“同源”政策将阻止您使用 AJAX。 Google 的方法既可以使用来自服务器端代码（例如 Java、ASP.NET、Ruby）的 API 调用，也可以使用称为“JSONP”的技术直接在 javascript 中使用，该技术涉及在服务器端创建“脚本”元素-飞。

（您还应该知道，当您使用后一种方法时，您会在页面源中暴露您的 Google 翻译 API 密钥，因此用户可能会窃取它。）

编辑添加：这是来自 Google 的 API 文档的示例代码：

<div id="sourceText">Hello world</div>
<div id="translation"></div>
<script>
  function translateText(response) {
    document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
  }
</script>
<script>
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  var sourceText = escape(document.getElementById("sourceText").innerHTML);
  // WARNING: be aware that YOUR-API-KEY inside html is viewable by all your users.
  // Restrict your key to designated domains or use a proxy to hide your key
  // to avoid misuage by other party.
  var source = 'https://www.googleapis.com/language/translate/v2?key=YOUR-API-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
  newScript.src = source;

  // When we add this script to the head, the request is sent off.
  document.getElementsByTagName('head')[0].appendChild(newScript);
</script>

【讨论】：

感谢@JacobM 因为这个系统是一个封闭的系统，所以安全程度不是很重要，但感谢您的提醒。当您说源变量需要成为 HTML 元素的 src 时，我将如何在函数中正确管理它？
我粘贴了来自 Google 的 API 文档的示例代码。它与你所拥有的非常相似。但是您需要放入创建脚本元素的部分（上面的newScript），然后分配它的src 属性（newScript.src = source;）。

【解决方案2】：

您将希望使用您最喜欢的 AJAX 方法（我的在 JQuery 中是 $.ajax）发布到该 url，然后将响应放入您的文本字段。

http://api.jquery.com/jQuery.ajax/

目前您正在构建一个 URL，如果访问该 URL，它将获得您想要的答案 - AJAX 请求将以编程方式访问该 URL 并从中获取数据。

【讨论】：

【解决方案3】：

我这样解决了我的问题。

<script>          
function callbackDescription(response) {
     document.getElementById("siteDesc" + langCode).innerHTML = response.data.translations[0].translatedText;
              }

              var langCode;

              function translateToLangCode(lang) {
                  langCode = lang;
                  translateDescription();
              }

              function translateDescription() {
                  var faciDescScript = document.createElement('script');
                  faciDescScript.type = 'text/javascript';
                  var sourceText = escape(document.getElementById("siteDescEN").innerHTML);
                  var faciDesc = 'https://www.googleapis.com/language/translate/v2?key=API_KEY_HEREsource=en&target=' + langCode.toLowerCase() + '&callback=callbackDescription&q=' + sourceText;
                  faciDescScript.src = faciDesc;
                  document.getElementsByTagName('head')[0].appendChild(faciDescScript);
              }
</script>

【讨论】：