调用google api 实现google网站下翻译全功能
近日google网站提供了google language api 函数，用户只需调用其函数就可实现google网站上的翻译功能
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fanyi.aspx.cs" Inherits="fanyi" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>黔南热线在线翻译</title>
<style type="text/css">
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
font-size: small;
margin: 15px;
}
form.query-box {
font-size: 15px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 4px;
margin-left : 0px;
width: 100%;
}
input.query-input {
padding-left : 2px;
margin-bottom : 4px;
width: 300px;
border: 1px solid #BCCDF0;
}
input.button {
margin-top : 4px;
}
div#main {
width: 300px;
}
div#results {
padding-top: 20px;
width: 300px;
}
div#results_title {
color: lightgray;
font-weight: bold;
}
div#results_body {
color: gray;
font-weight: bold;
font-size: 16px;
margin-bottom: 20px;
}
</style>
<script src="http://www.google.com/jsapi?key=internal" type="text/javascript"></script>
</head>
<body>
<table width="100%">
<tr>
<td style="width: 168px">
</td>
<td colspan="2" rowspan="3">
<div id="results" style="width: 347px; height: 238px">
<div id="results_title">
翻译结果:</div>
<hr/>
<div id="results_body"></div>
</div>
<br />
<br />
<br />
</td>
</tr>
<tr>
<td style="width: 168px">
<input class="query-input" id="source" type="text"
autocomplete="off" value="hello world" style="width: 326px; height: 245px"/></td>
</tr>
<tr>
<td style="width: 168px">
<div id="main">
<form class="query-box" onsubmit="return submitChange();">
<select name="langpair" id="langpair">
<option value="ar|en">阿拉伯语 to 英语</option>
<option value="zh|en">中文 to 英语</option>
<%-- <option value="zh-CN|zh-TW">Chinese(Simplified to Traditional)</option>
<option value="zh-TW|zh-CN">Chinese (Traditional to Simplified)</option>--%>
<option value="nl|en">Dutch to English</option>
<option value="en|ar">英语 to 阿拉伯语</option>
<option value="en|zh-CN">英语 to 中文(简体)</option>
<option value="en|zh-TW">英语 to 中文(繁体)</option>
<option value="en|nl">英语 to 荷兰语</option>
<option value="en|fr">英语 to 法语</option>
<option value="en|de">英语 to 德语</option>
<option value="en|it">英语 to 意大利语</option>
<option value="en|ja">英语 to 日本语</option>
<option value="en|ko">英语 to 韩语</option>
<option value="en|pt-PT">英语 to 葡萄牙语</option>
<option value="en|ru">英语 to 俄语</option>
<option value="en|es" selected="" >英语 to 西班牙语</option>
<option value="fr|en">法语 to 英语</option>
<option value="fr|de">法语 to 德语</option>
<option value="de|en">德语 to 英语</option>
<option value="de|fr">德语 to 法语</option>
<option value="it|en">意大利语 to 英语</option>
<option value="ja|en">日本语 to 英语</option>
<option value="ko|en">韩语 to 英语</option>
<option value="pt|en">葡萄牙语 to 英语</option>
<option value="ru|en">俄语 to 英语</option>
</select>
<input class="button" type="submit" value="翻译"/>
</form>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
google.load("language", "1");
google.setOnLoadCallback(submitChange);
function submitChange() {
var value = document.getElementById('source').value;
var langpair = document.getElementById('langpair');
var pair = langpair.options[langpair.selectedIndex].value.split('|');
var src = pair[0];
var dest = pair[1];
google.language.translate(value, src, dest, translateResult);
return false;
}
function translateResult(result) {
var resultBody = document.getElementById("results_body");
if (result.translation) {
resultBody.innerHTML = result.translation;
} else {
resultBody.innerHTML = '<span style="color:red">Error Translating</span>';
}
}
</script>
</body>