Description:
In this example we explain that how to use Google Translation or
Google Translate API in JavaScript and jQuery.suppose your application have
requirement like translate facility in the same application then you can use
this Google API to translate the code or text or input entered by you.
Google Translation API can be accessed using the HTTP GET method
and it returns the translated value or content in JSON format.
Below is the example that demonstrates translating facility same
like as we use in Google translator like below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Traslator
Example using Google API</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Source Language
</td>
<td>
<select id="ddlSourceLanguage">
<option value="ZH">Chinese (Mandarin)</option>
<option value="CS">Czech</option>
<option value="DA">Danish</option>
<option value="NL">Dutch</option>
<option value="EN" selected
= "selected">English</option>
<option value="ET">Estonian</option>
<option value="FR">French</option>
<option value="KA">Georgian</option>
<option value="DE">German</option>
<option value="HI">Hindi</option>
<option value="HU">Hungarian</option>
<option value="LA">Latin</option>
<option value="LV">Latvian</option>
<option value="LT">Lithuanian</option>
<option value="SR">Serbian</option>
<option value="CY">Welsh</option>
<option value="XH">Xhosa</option>
</select>
</td>
<td>
</td>
<td>
Target Language
</td>
<td>
<select id="ddlTargetLanguage">
<option value="ZH">Chinese (Mandarin)</option>
<option value="CS">Czech</option>
<option value="DA">Danish</option>
<option value="NL">Dutch</option>
<option value="EN">English</option>
<option value="ET">Estonian</option>
<option value="FR" selected
= "selected">French</option>
<option value="KA">Georgian</option>
<option value="DE">German</option>
<option value="HI">Hindi</option>
<option value="HU">Hungarian</option>
<option value="LA">Latin</option>
<option value="LV">Latvian</option>
<option value="LT">Lithuanian</option>
<option value="SR">Serbian</option>
<option value="CY">Welsh</option>
<option value="XH">Xhosa</option>
</select>
</td>
<td>
<input type="button" id="btnTranslateLanguage" value="Translate"
/>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="txtSourceLanguage" rows="10" cols="30"></textarea>
</td>
<td>
</td>
<td colspan="2">
<textarea id="txtTargetLanguage" rows="10" cols="30"></textarea>
</td>
<td>
</td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnTranslateLanguage").click(function () {
var
url = "https://translation.googleapis.com/language/translate/v2?key=API_Key";
url += "&source="
+ $("#ddlSourceLanguage").val();
url += "&target="
+ $("#ddlTargetLanguage").val();
url += "&q="
+ escape($("#txtSourceLanguage").val());
$.get(url, function
(data, status) {
$("#txtTargetLanguage").val(data.data.translations[0].translatedText);
});
});
</script>
</body>
</html>
0 comments:
Post a Comment