调用百度翻译 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 ...
随机推荐
- 多线程总结-同步之ReentrantLock
目录 1 ReentrantLock与synchronized对比 2.示例用法 2.1 基本用法 2.2 尝试锁 2.3 可打断 2.4 公平锁 1 ReentrantLock与synchroniz ...
- [WPF自定义控件库]了解WPF的布局过程，并利用Measure为Expander添加动画
1. 前言 这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容. 我不建议初学者做太多动画的工作,但合适的动画可以引导用户视线,提升用户体 ...
- 【基础算法模拟+例题】-C++
在漫长的刷题练习过程中,几乎所有稍微熟练一点的OIer都会,但是都几乎没有经过系统的学习,今天,我们就来讲讲模拟算法,也是为了复习emm. 定义? 定义?模拟还有什么定义吗? 那什么是模拟呢? 就是按 ...
- Unity 3d 脚本常用事件
1.学习笔记,每天晚上看看unity 3d 的教程 学点东西,先上一张图 这是 系统中脚本执行的顺序图 Awake()在MonoBehavior创建后就立刻调用,在脚本实例的整个生命周期中,Awake ...
- MediatR-进程内的消息通信框架
MediatR是一款进程内的消息订阅.发布框架,提供了Send方法用于发布到单个处理程序.Publish方法发布到多个处理程序,使用起来非常方便.目前支持 .NET Framework4.5..NET ...
- 个人永久性免费-Excel催化剂功能第34波-提取中国身份证信息、农历日期转换相关功能
这两天又被刷朋友圈,又来了一个自主研发红芯浏览器,国产啊国产,这是谁的梦.就算国产了,自主了,无底线的夸大吹嘘无道德,企业如是,国家如是,大清已亡!再牛B的技术落在天天删敏感信息.无法治.无安全感可言 ...
- Shiro认证时的密码比对
在前面一节<Shiro在Web环境下集成Spring的大致工作流程>的最后一步中提到由Shiro完整密码比对. 那么具体是怎么工作的? 1,既然shiro会把密码来进行比对,当然会调用 U ...
- es6的基本用法
1. let和const <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 带新手玩转MVC——不讲道理就是干（上）
带新手玩转MVC——不讲道理就是干(上) 前言:这几天更新了几篇博客,都是关于Servlet.JSP的理解,后来又写了两种Web开发模式,发现阅读量还可以,说明JSP还是受关注的,之前有朋友评论说JS ...
- Go语言圣经习题练习_1.6并发获取多个URL
练习 1.10: 找一个数据量比较大的网站,用本小节中的程序调研网站的缓存策略,对每个URL执行两遍请求,查看两次时间是否有较大的差别,并且每次获取到的响应内容是否一致,修改本节中的程序,将响应结果输 ...