Question

鉴于以下内容

    <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>

如何连接此按钮以处理将翻译后的文本放入翻译文本区域的功能？

Answer 1

你已经离开了一步。 “source”变量需要成为HTML src元素的script属性。

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

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

（您还应该注意，当您使用后一种方法时，您在页面源中公开了Google Translate 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>

Answer 2

你会想要使用你最喜欢的AJAX方法（我在JQuery中是$ .ajax）发布到该网址，然后将响应放入你的文本字段。

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

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

Answer 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>

谷歌翻译/基本Javascript问题

3 个答案: