Обратный звонок с Google Translate V2 - PullRequest
Новая
       12

Обратный звонок с Google Translate V2

1 голос
/ 22 декабря 2011

Раньше я использовал V1 Google переводчика. В моем JavaScript я бы перебирал коллекцию элементов после загрузки страницы, переводил текст и выводил результат в соответствующее текстовое поле. Я изо всех сил пытаюсь реализовать ту же функциональность в V2 платного API (биллинг включен).

Это то, что я сделал в 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);
            }

Если бы я мог передать дополнительный параметр в функцию обратного вызова, я мог бы указать элемент управления для обновления, но я не думаю, что это возможно при использовании этого метода.

Ответы [ 2 ]

3 голосов
/ 22 декабря 2011

Ну, вы можете создать «новую» функцию обратного вызова для каждого элемента, который вы переводите, и удалить функцию, как только закончите.т.е. что-то вроде: 

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

2 голосов
/ 22 декабря 2011

Успех!

Мне удалось заставить работать метод $.ajax(), что позволило мне создать функцию обратного вызова для каждого отдельного переведенного элемента.

Первая проблема заключалась в том, что я использовал jQuery 1.4.x.В версии 1.5 и выше разрешены междоменные вызовы при использовании типа данных JASONP.Вот почему я получаю сообщение «Доступ запрещен».

Вторым изменением было изменение 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');
                 }
          });

Надеюсь, что этоодних для других.

...