调用百度翻译 API 来翻译网站信息
之前说过jquery.i18n.js 来做网站的中英翻译，前提就得做一套中文内容，一套英文内容来解决，好处是中英翻译可以准确无误，本篇文章我们来看一下调用百度翻译的 API 来进行网站的翻译，但是翻译可能会有些许不如意，毕竟是机器翻译嘛。
前期准备：md5.js 和 jquery.js
百度翻译技术文档为我们做了不同语言的 demo：http://api.fanyi.baidu.com/api/trans/product/apidoc
我们现在要做的是 js 的 demo。
前提是我们得注册百度翻译账号，然后才能获取到 appid 和 key。
我们下载下来的 js demo 如下：
<!doctype html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript">
var appid = '2015063000000001';
var key = '12345678';
var salt = (new Date).getTime();
var query = 'apple';
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
var from = 'en';
var to = 'zh';
var str1 = appid + query + salt +key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function (data) {
console.log(data);
}
}); </script>
</body>
根据上面的 demo 我们可以发现需要 appid 和 key 两个必须字段，然后将根据 demo 将我们需要翻译的内容根据 ajax 传参就可以了。根据上面的 demo,我们做出一下方法：
<!doctype html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div class="main">
<p>苹果</p>
</div>
<script src="./jquery-1.11.3.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript"> function GetBaidu(query, obj) {
var q = query;
var appid = "2015063000000001"; // 请自行获取
var key = "12345678"; // 请自行获取
var salt = (new Date).getTime();
var str1 = appid + q + salt + key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'post',
dataType: 'jsonp',
data: {
q: q,
from: 'auto',
to: 'en',
appid: appid,
salt: salt,
sign: sign
},
success: function (msg) {
console.log(msg)
var html = "";
for (var i = 0; i < msg.trans_result.length; i++) {
console.log(msg.trans_result[i].dst);
html += msg.trans_result[i].dst
}
obj.html(html)
}
});
} var text = $('.main p').html(function (i, text) {
GetBaidu(text, $(this));
}); </script>
</body>
运行结果如下：
我们发现确实给我们翻译出了 苹果，翻译结果还是很准确的，但是当我们再多加几个名称，如香蕉，橘子，如下：
<div class="main">
<p>苹果</p>
<p>香蕉</p>
<p>橘子</p>
</div>
我们再调用上面的 GetBaidu( ) 的方法，运行结果如下：
我们发现返回一个 54003 的错误码，通过百度翻译的技术开发文档我们知道该错误码为：
这就比较尴尬了，不能频率过高，那我们该如何是好呢？
在我们下载的 demo 中有这样一句话：
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
那我们可以将我们想翻译的内容拼成上述形式，值请求一次 ajax 请求就可以了，如下：
<!doctype html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div class="main">
<button class="btn">点击切换</button>
<p transfer-toggle="transfer">苹果</p>
<p transfer-toggle="transfer">香蕉</p>
<p transfer-toggle="transfer">橘子</p>
</div>
<script src="./jquery-1.11.3.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript"> function getArr() {
var arrHtml = [];
var arrThis = [];
var text = $("[transfer-toggle='transfer']").text(function (i, text) {
// console.log(i + text.replace("\n", "").replace(/\s+/g, ' '));
arrHtml.push(text.replace("\n", " ")); // 将我们想要翻译的内容存进数组里，并且将回车 \n 匹配成空格，避免翻译时 \n 与我们定义的冲突
arrThis.push($(this))
});
return [arrHtml, arrThis]
} function GetBaidu(from, to, query, obj) {
console.log(query)
var q = query.join("\n"); // 将内容数组用 \n 拼接
var appid = "2015063000000001"; // 请自行获取
var key = "12345678"; // 请自行获取
var salt = (new Date).getTime();
var str1 = appid + q + salt + key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'post',
dataType: 'jsonp',
data: {
q: q,
from: from,
to: to,
appid: appid,
salt: salt,
sign: sign
},
success: function (msg) {
var html = "";
for (var i = 0; i < msg.trans_result.length; i++) {
console.log(msg.trans_result[i].dst);
html = msg.trans_result[i].dst;
obj[i].html(html)
}
}
});
} var num = 0;
$(".btn").on("click", function () {
if (num === 0) {
num = 1;
GetBaidu("zh", "en", getArr()[0], getArr()[1]);
} else {
num = 0;
GetBaidu("en", "zh", getArr()[0], getArr()[1]);
}
}) </script>
</body>
最终结果如下：
第一次点击
第二次点击
第三次点击
第四次点击
我们发现经过几次点击最后的 橘子 已经被翻译成了橙色，翻译的不是很友好，但整体来说还是挺好的。
需要注意的是我们点击按钮的频率不能太快了，否则灰分 50043 的错误码，因为我们的请求频率过快了。
调用百度翻译 API 来翻译网站信息的更多相关文章
- 调用百度地图api隐藏版权信息
调用百度地图API隐藏右下角版权信息 商用的话建议不要隐藏,避免侵权. 隐藏前: 隐藏后: .BMap_cpyCtrl { display: none; } .anchorBL { display: ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
- web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...
- Python调用百度地图API实现批量经纬度转换为实际省市地点（api调用，json解析，excel读取与写入）
1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...
- scrapy爬虫框架调用百度地图api数据存入数据库
scrapy安装配置不在本文 提及, 1.在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令 scrapy startproject mySpider 其中, my ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
随机推荐
- GitHub代码阅读神器，你值有拥有！
(题图:from github) Github作为全球最大的程序员聚集地,已经成为学习开发技能的绝佳伴侣(如果你是程序员,但你还没有账户的话,这里建议你去signup,毕竟能增加成长的机会,不能错过 ...
- JavaScript权威指南第六版（阅读笔记）
前言: 对于软件行业学习是无止境的,因为知识更替非常快,能够快速稳固掌握一门新技术是一个程序员应该具备的基本素质. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢 ...
- springboot与springcloud的关系
1 . 问题描述 随着springboot.springcloud的不断迭代升级,开发效率不断提升,越来越多的开发团队加入到spring的大军中,今天用通俗的语言,介绍下什么是springboot,s ...
- bzoj1854 游戏题解（二分图/并查集）
1854: [Scoi2010]游戏 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 5547 Solved: 2229[Submit][Status] ...
- 星际旅行（欧拉路，欧拉回路）（20190718 NOIP模拟测试5）
瞎搞了一个ans+=du*(du-1)/2 wa20分,好桑心(话外音:居然还有二十分,出题人太周到了) 还是判欧拉路 题解没太仔细想,感觉还是kx的思路明白 具体就是:因为每条边要走两遍,可以把一条 ...
- MyBatis where、set、trim标签的用法
<!-- 4.3.1 where用法 <where>标签的作用:如果该便签包含的元素中有返回值,就插入一个where:如果 where后面的字符串是一and或or开头的,就将它们剔除 ...
- dbo是默认用户也是架构
dbo是默认用户也是架构 dbo作为架构是为了更好的与2000兼容, 在2000中DataBaseName.dbo.TableName解释为:数据库名.用户名.表名, 在2005中DataBaseNa ...
- [原创]wireshark&xterm安装、配置和使用
--wireshark && xterm--一.安装wireshark: #apt-get install wireshark二.启动wireshark: #wireshark 或者 ...
- vs项目依赖项黄色感叹号解决方案
右键项目解决方案,生成解决方案或重新生成解决方案,黄色感叹号消失,依赖项生效,亲测有效
- 洛谷 P2671 求和
题目描述 一条狭长的纸带被均匀划分出了nn个格子,格子编号从11到nn.每个格子上都染了一种颜色color\_icolor_i用[1,m][1,m]当中的一个整数表示),并且写了一个数字number\ ...