谷歌翻译/基本Javascript问题

鉴于以下情况

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

贾斯汀你好，今天好吗？ 函数translateText（response）{document.getElementById（“translation”）.innerHTML+=response.data.translations[0].translatedText；} 函数translateThis（）{ var sourceText=escape（document.getElementById（“sourceText”）.innerHTML）； var源代码https://www.googleapis.com/language/translate/v2?key=MY_KEY_HERE&source=en&target=es&callback=translateText&q=“+源文本； 返回源； }

---

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

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

---

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

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

---

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

您省略了一个步骤。“source”变量需要成为HTML

script

元素的

src

属性

仔细看看他们的医生

顺便说一句，其他人正把你引向AJAX，但这实际上是行不通的。由于您的站点上没有托管Google URL，因此“同源”策略将阻止您使用AJAX。Google方法意味着要么使用来自服务器端代码（如Java、ASP.NET、Ruby）的API调用，要么直接在javascript中使用一种称为“JSONP”的技术，该技术涉及动态创建“脚本”元素

（您还应该注意，当您使用后一种方法时，您正在页面源代码中公开您的Google Translate API密钥，因此用户可能会窃取它。）

编辑添加：以下是来自谷歌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>

你好，世界
函数translateText（响应）{
document.getElementById（“translation”）.innerHTML+=“
”+response.data.translations[0]。translatedText；
}
var newScript=document.createElement（'script'）；
newScript.type='text/javascript'；
var sourceText=escape（document.getElementById（“sourceText”）.innerHTML）；
//警告：请注意，html中的-API-KEY可供所有用户查看。
//将密钥限制到指定域或使用代理隐藏密钥
//为避免另一方误导。
var源代码https://www.googleapis.com/language/translate/v2?key=YOUR-API-KEY&source=en&target=de&callback=translateText&q='+sourceText；
newScript.src=源；
//当我们将这个脚本添加到头部时，请求被发送出去。
document.getElementsByTagName（'head'）[0].appendChild（newScript）；

您遗漏了一个步骤。“source”变量需要成为HTML

script

元素的

src

属性

仔细看看他们的医生

顺便说一句，其他人正把你引向AJAX，但这实际上是行不通的。由于您的站点上没有托管Google URL，因此“同源”策略将阻止您使用AJAX。Google方法意味着要么使用来自服务器端代码（如Java、ASP.NET、Ruby）的API调用，要么直接在javascript中使用一种称为“JSONP”的技术，该技术涉及动态创建“脚本”元素

（您还应该注意，当您使用后一种方法时，您正在页面源代码中公开您的Google Translate API密钥，因此用户可能会窃取它。）

编辑添加：以下是来自谷歌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>

你好，世界
函数translateText（响应）{
document.getElementById（“translation”）.innerHTML+=“
”+response.data.translations[0]。translatedText；
}
var newScript=document.createElement（'script'）；
newScript.type='text/javascript'；
var sourceText=escape（document.getElementById（“sourceText”）.innerHTML）；
//警告：请注意，html中的-API-KEY可供所有用户查看。
//将密钥限制到指定域或使用代理隐藏密钥
//为避免另一方误导。
var源代码https://www.googleapis.com/language/translate/v2?key=YOUR-API-KEY&source=en&target=de&callback=translateText&q='+sourceText；
newScript.src=源；
//当我们将这个脚本添加到头部时，请求被发送出去。
document.getElementsByTagName（'head'）[0].appendChild（newScript）；

我这样解决了我的问题

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

函数回调描述（响应）{
document.getElementById（“siteDesc”+langCode）.innerHTML=response.data.translations[0].translatedText；
}
var语言码；
函数translateToLangCode（lang）{
langCode=lang；
translateDescription（）；
}
函数translateDescription（）{
var faciDescScript=document.createElement（'script'）；
faciDescScript.type='text/javascript'；
var sourceText=escape（document.getElementById（“siteDescEN”）.innerHTML）；
var faciDesc='1〕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>          
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>

函数回调描述（响应）{
document.getElementById（“siteDesc”+langCode）.innerHTML=response.data.translations[0].translatedText；
}
变量