使用前端技术：h5+js+ajax开发网页翻译功能，调用百度开放平台的API，入门级前端demo，非常详细好入手
功能为：点击Translate按钮，实现英译汉，页面如下：
一、appID和key值准备
在百度开放平台
https://api.fanyi.baidu.com/
上注册，然后按照步骤注册开发者，注册开发者是免费的，日使用在200w个字符内也是免费的，超过就要收费了。另外，也可以在平台上选择停用翻译功能，避免超出收费
注册成功后，会给你个appid和密钥（即key）
二、下载demo，需要md5文件
在百度平台上进入“文档与支持”目录下，找到这个js版的demo，然后下载
下载之后有一个md5.js文件，这个是我们一会需要的
三、编写代码
1、建目录：在随便某个目录下建个目录，我是直接放在桌面上
2、准备jquery.min.js文件、刚才的md5.js文件、新建个a.html文件。（注意：需要放到同一个目录下）
3、编辑a.html文件，可以用VSCode打开，输入如下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translate</title>
</head>
<body>
<div id="SRC">
<textarea id="srcText" name="srcText " style="width:500px; height:120px;">
</textarea>
<button id="Click" name="Click">Translate</button>
</div>
<br />
<hr />
<div id="DST">
<textarea id="dstText" name="dstText" style="width:500px; height:120px;">
</textarea>
</div>
</body>
<!--jquery.min.js文件可自行百度下载 -->
<script src="jquery.min.js" type="text/javascript"></script>
<!--md5.js是百度翻译开放平台上下载的demo中的文件 -->
<script src="md5.js"></script>
<script type="text/javascript">
var appid = '2020000000000'; //放自己在百度上申请的APP ID
var key = '14ICaaaaaaaaa'; //放自己在百度上申请的密钥
var salt = (new Date).getTime();
var from = 'en';
var to = 'zh';
$("#Click").click(function (){ //点击按钮调用，引用jquery语法
var contents = $("#srcText").val()
// alert(contents)
var str1 = appid + contents + salt +key;
var sign = MD5(str1);
$.ajax({
type:"get", //使用get方法请求
async:false, //must be synchronized
url:"http://api.fanyi.baidu.com/api/trans/vip/translate",
dataType:"jsonp",
data: {
q: contents, //被翻译的内容，实现英译汉
from: from, //源语言，英文
to: to, //翻译的语言，中文
appid: appid,
salt: salt,
sign: sign //MD5加密后的内容
},
success:function(data){
console.log(data);
$("#dstText").empty() ;
for ( var i = 0 ; i < data.trans_result.length ; i++ )
{
$("#dstText").append( data.trans_result[i].dst +" <br />") ;
}
// alert(data.dst_tts)
},
error:function(){
alert('Fail to translate with baidu API!');
}
});
}) ;
</script>
</html>
注意：以上代码其他的不用改，但是第29行和30行的appid、key要改成自己在百度平台上申请的
四、运行
直接使用浏览器打开a.html（或者双击），就可以直接展示界面了
五、扩展
1、如果想使用其他，比如英译汉、或者其他日语、韩语、阿拉伯语，只需要把a.html中的“from”和”to”这两个变量改一下，对照表参见百度翻译平台上的：
2、这样只是实现简单的词或者句子翻译，但是如果想展示具体的扩展，就像其他词典那样展示词根、发音、扩展、造句登，现在还不行，原因是词典功能不支持个人开发者。如果需要词典功能需要注册企业开发者，参见：
https://api.fanyi.baidu.com/api/trans/product/apidoc