How to translate specific content in website

2019-08-11 07:37发布

站内问答 / JavaScript
856 1 4

I'm wondering if there is a way to use google translation, or any other app/widget/way to programaticaly embed translation into a website to help translating specific content (not general all site translation):

Example:

I have one form input element with a value in english, and want to translate only that value to French, and insert it into a specific html element and then send that info in a form.

<!DOCTYPE html>
<html>
<body>

<input type="text" id="origin" value="Some text in English"/>
<button type="button" onclick="translate("origin", "destination")">Click Me to Translate!</button>

<input type="text" id="destination" value="Translated content"/>

<input type="submit"/>

</body>
</html>

The objective would be to use something similar to www.translate.google.com (or itself)... is there any app/widget/way to do this without translate all page?

Thank you

1条回答
beautiful°
2楼-- · 2019-08-11 08:37

This is just one (first) way that worked for me... it can, probably, be optimized.

HTML to copy/past:

<input type="text" id="txtMsgOrigin" value="" />
        <input type="text" id="txtMsgDestiny" value="" />
        <button  id="btnTranslate" onclick="translateSourceTarget();">Translate</button>

Javascript file: (you can separate functions to get token on Document.ready, so you can cut waiting time on translation, because you would already have an access_token in g_token)

var g_token = '';

function getToken() {
    var requestStr = "getTranslatorToken";

    $.ajax({
        url: requestStr,
        type: "GET",
        cache: true,
        dataType: 'json',
        success: function (data) {
            g_token = data.access_token;
            var src = $("#txtMsgOrigin").val();
            translate(src, "en", "pt");
        }
    });
}

function translate(text, from, to) {
    var p = new Object;
    p.text = text;
    p.from = from;
    p.to = to;
    p.oncomplete = 'ajaxTranslateCallback'; // <-- a major puzzle solved.  Who would have guessed you register the jsonp callback as oncomplete?
    p.appId = "Bearer " + g_token; // <-- another major puzzle.  Instead of using the header, we stuff the token into the deprecated appId.
    var requestStr = "//api.microsofttranslator.com/V2/Ajax.svc/Translate";

    window.ajaxTranslateCallback = function (response) {
        // Display translated text in the right textarea.
        //alert(response);
        $("#txtMsgDestiny").val(response);
    }

    $.ajax({
        url: requestStr,
        type: "GET",
        data: p,
        dataType: 'jsonp',
        cache: true
    });
}

function translateSourceTarget() {
    // Translate the text typed by the user into the left textarea.
    getToken()
}

C# Controller:

public async Task<JToken> getTranslatorToken()
        { 
            string clientID = ConfigurationManager.AppSettings["ClientID"].ToString();
            string clientSecret = ConfigurationManager.AppSettings["ClientSecret"].ToString();
            Uri translatorAccessURI = new Uri("https://datamarket.accesscontrol.windows.net/v2/OAuth2-13");

            // Create form parameters that we will send to data market.
            Dictionary<string, string> requestDetails = new Dictionary<string, string>
            {
                { "grant_type", "client_credentials" },
                { "client_id",   clientID},
                { "client_secret",  clientSecret },
                { "scope", "http://api.microsofttranslator.com" }
            };

            FormUrlEncodedContent requestContent = new FormUrlEncodedContent(requestDetails);

            // We use a HttpClient instance for Azure Marketplace request
            HttpClient client = new HttpClient();

            //send to data market
            HttpResponseMessage dataMarketResponse = await client.PostAsync(translatorAccessURI, requestContent);

            // If client authentication failed then we get a JSON response from Azure Market Place
            if (!dataMarketResponse.IsSuccessStatusCode)
            {
                //JToken error = await dataMarketResponse.Content.ReadAsAsync<JToken>();
                JToken error = await dataMarketResponse.Content.ReadAsStringAsync();
                string errorType = error.Value<string>("error");
                string errorDescription = error.Value<string>("error_description");
                throw new HttpRequestException(string.Format("Azure market place request failed: {0} {1}", errorType, errorDescription));
            }


            // Get the access token to attach to the original request from the response body
            JToken response = JToken.Parse(await dataMarketResponse.Content.ReadAsStringAsync());

            return response;


        }

Time for hair to grow again in my head! :-P

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)