使用谷歌翻译 V2 回调

Question

我曾经使用谷歌翻译的V1。在我的 JavaScript 中，我会在页面加载后循环遍历一组元素，翻译文本并将结果输出到相应的文本框中。我正在努力在付费 API 的 V2 中实现相同的功能（已启用计费）。

这是我在 V1 中所做的，在一个循环中：

google.language.translate(lookupText, 'gb', 'fr', function (result) {
if (!result.error) {
ctlSuggestion.innerText = result.translation;
}
});

这很好，因为回调函数嵌入在请求中，所以一旦结果返回，我可以更新正确元素的 innerText。

在 V2 中，似乎没有类似的方法。我尝试使用 jQuery Ajax，但收到“访问被拒绝”消息，我认为这是因为它是跨域调用或其他原因：

  $.ajax({
          type: "GET",
          url: "https://www.googleapis.com/language/translate/v2",
          data: { key: "API-KEY", source: "en", target: "fr", q: lookupText },
          dataType: 'json',
          success: function (data) {
                     alert(data.data.translations[0].translatedText);
                    },
          error: function (data) {
                   alert('fail');
                 }
          });

我可以让 REST 方法工作，但在回调函数中无法知道请求来自哪个控件：

 var newScript = document.createElement('script');
            newScript.type = 'text/javascript';
            var sourceText = "Hello World"
            var source = 'https://www.googleapis.com/language/translate/v2?key=API-KEY=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);


            function translateText(response) {
                alert(response.data.translations[0].translatedText);
            }

如果我可以将一个额外的参数传递给回调函数，那么我可以指定要更新的控件，但我认为使用这种方法是不可能的。

Answer 1

好吧，您可以为要翻译的每个元素创建一个“新”回调函数，并在完成后删除该函数。即类似的东西：

function translateElement(elementID) {

    var element = document.getElementsById(elementID);

    // this is a temporary function for updating this particular element
    window['translate'+elementID] = function(response) {
        document.getElementsById(elementID).innerHTML = response.data.translations[0].translatedText;
        setTimeout(function() {
            // remove the temporary function
            window['translate'+elementID] = null;
        }, 1000);
    };

    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    var sourceText = "Hello World"
    var source = 'https://www.googleapis.com/language/translate/v2?key=API-KEY=en&target=de&'+
    'callback=translate'+elementID+'&q=' + sourceText;
    newScript.src = source;

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

然后对于每个元素你可以调用translateElement(<id>)

Answer 2

成功！

我设法使$.ajax() 方法工作，这使我能够为每个单独的翻译元素创建一个回调函数。

第一个问题是我使用的是 jQuery 1.4.x。使用 JASONP 数据类型时，从 1.5 版开始允许跨域调用。这就是我收到“访问被拒绝”消息的原因。

第二个更改是将dataType 从jspn 更改为jsonp：

$.ajax({
          type: "GET",
          url: "https://www.googleapis.com/language/translate/v2",
          data: { key: "API-KEY", source: "en", target: "fr", q: lookupText },
          dataType: 'jsonp',
          success: function (data) {
                     alert(data.data.translations[0].translatedText);
                    },
          error: function (data) {
                   alert('fail');
                 }
          });

希望这对其他人有用。