前端js调用百度翻译api接口

1、到百度翻译开放平台注册自己的账号

2、编辑html代码，设计一个简易的页面

3、远程调用百度翻译api

4、完整代码

5、测试

到百度翻译开放平台注册自己的账号

（1）进入网页:开放平台官网

（2）如果没有自己登录账号，可以先注册：

（3）登录过后，记得开启服务

（4）获取appid，和密钥

编辑html代码，设计一个简易的页面

（1）html部分代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<script src="staticResource/publicFunction.js"></script>
<script src="staticResource/MD5.js"></script>
<script src="staticResource/jquery-2.1.4.min.js"></script>
<body>
<div class="home_div"><div class="value_div"><table width="700"><tr><td colspan="4"><b><p style="text-align: center; width: 100%; font-size: 25px; ">一个简洁翻译网页</p></b></td></tr><tr><td><label>输入内容:</label></td><td><input id="sendMessage" placeholder="请输入要翻译的内容" type="text" size="35"><br></td><td><button onclick="doRead('sendMessage','theAudio')"><b>阅读</b></button></td><td><label id="inputLanguageType">未识别</label></td></tr><tr><td><label>返回结果:</label></td><td><input type="text" readonly="readonly" id="showResponseValue" size="35"></input></td><td><button onclick="doRead('showResponseValue','theAudio')"><b>阅读</b></button></td><td><label id="showLanguageType">未识别</label></td></tr><tr><td colspan="4" style="width: 100%; align-content: center;"><button id="goTran" style=" text-align: center; width: 100%; font-size: 20px; ">点击翻译</button></td></tr></table><audio id="theAudio"></audio></div>
</div>
</body>
</html>

（2）css代码

<style>.value_div{width: auto;height: auto;justify-content: center;align-items: center;}.home_div{background: #dbdcda;display: flex;flex-direction: row;width: 100%;height: 100%;justify-content: center;align-content: center;align-items: center;margin: 0px;}body,html{width: 100%;height: 100%;margin: 0px;}label{font-size: 18px;min-width: 20px;text-align: center;}input{border-width: 0px;display: inline;font-size: 17px;width: 100%;height: 100%;margin-left: 2px;margin-right: 2px;color: black;}table{background: #ccfffc;align-items: center;align-content: center;height: 300px;}td{text-align: center;vertical-align: middle;align-content: center;align-items: center;background: #ffeee6;margin: 3px;}tr{width: 100%;}b{font-size: 18px;}</style>

（3）js代码

$(function(){//翻译$("#goTran").click(function(){var query = $("#sendMessage").val();if (query.toString()=='') {return;}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) {show=document.getElementById('showResponseValue');show.value=data.trans_result[0].dst;ResFrom=data.from;ResTo=data.to;FType=document.getElementById('inputLanguageType');TType=document.getElementById('showLanguageType');FType.innerHTML='语言类型:'+ResFrom;TType.innerHTML='语言类型:'+ResTo;}});});});$(function () {$('#sendMessage').keydown(function (event) {if (event.keyCode==13){var query = $("#sendMessage").val();if (query.toString()=='') {return;}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) {show=document.getElementById('showResponseValue');show.value=data.trans_result[0].dst;ResFrom=data.from;ResTo=data.to;FType=document.getElementById('inputLanguageType');TType=document.getElementById('showLanguageType');FType.innerHTML='语言类型:'+ResFrom;TType.innerHTML='语言类型:'+ResTo;}});}});});</script>

远程调用百度翻译api

（1）地址：url: 'http://api.fanyi.baidu.com/api/trans/vip/translate'

（2）参数：

q: query,//要翻译字段

appid: appid,//用户appid

salt: salt,//当前系统时间

from: from,//翻译对象语言类型

to: to,//翻译后的语言类型

sign: sign//由appid、翻译字段、当前系统时间、用户秘钥通过md5算法转换而成

（3）publicFunction.js文件如下：

var i = "320305.131321201"function n(r, o) {for (var t = 0; t < o.length - 2; t += 3) {var a = o.charAt(t + 2);a = a >= "a" ? a.charCodeAt(0) - 87 : Number(a),a = "+" === o.charAt(t + 1) ? r >>> a : r << a,r = "+" === o.charAt(t) ? r + a & 4294967295 : r ^ a}return r
}function e(r) {var o = r.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g);if (null === o) {var t = r.length;t > 30 && (r = "" + r.substr(0, 10) + r.substr(Math.floor(t / 2) - 5, 10) + r.substr(-10, 10))} else {for (var e = r.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/), C = 0, h = e.length, f = []; h > C; C++)"" !== e[C] && f.push.apply(f, a(e[C].split(""))),C !== h - 1 && f.push(o[C]);var g = f.length;g > 30 && (r = f.slice(0, 10).join("") + f.slice(Math.floor(g / 2) - 5, Math.floor(g / 2) + 5).join("") + f.slice(-10).join(""))}var u = void 0, l = "" + String.fromCharCode(103) + String.fromCharCode(116) + String.fromCharCode(107);u = null !== i ? i : (i = window[l] || "") || "";for (var d = u.split("."), m = Number(d[0]) || 0, s = Number(d[1]) || 0, S = [], c = 0, v = 0; v < r.length; v++) {var A = r.charCodeAt(v);128 > A ? S[c++] = A : (2048 > A ? S[c++] = A >> 6 | 192 : (55296 === (64512 & A) && v + 1 < r.length && 56320 === (64512 & r.charCodeAt(v + 1)) ? (A = 65536 + ((1023 & A) << 10) + (1023 & r.charCodeAt(++v)),S[c++] = A >> 18 | 240,S[c++] = A >> 12 & 63 | 128) : S[c++] = A >> 12 | 224,S[c++] = A >> 6 & 63 | 128),S[c++] = 63 & A | 128)}for (var p = m, F = "" + String.fromCharCode(43) + String.fromCharCode(45) + String.fromCharCode(97) + ("" + String.fromCharCode(94) + String.fromCharCode(43) + String.fromCharCode(54)), D = "" + String.fromCharCode(43) + String.fromCharCode(45) + String.fromCharCode(51) + ("" + String.fromCharCode(94) + String.fromCharCode(43) + String.fromCharCode(98)) + ("" + String.fromCharCode(43) + String.fromCharCode(45) + String.fromCharCode(102)), b = 0; b < S.length; b++)p += S[b],p = n(p, F);return p = n(p, D),p ^= s,0 > p && (p = (2147483647 & p) + 2147483648),p %= 1e6,p.toString() + "." + (p ^ m)
}function doRead(valueId,audio) {getValue=document.getElementById(valueId).value;if (getValue=='') return;var theAudio=document.getElementById(audio);var readUrl='https://dict.youdao.com/speech?audio=';theAudio.src=readUrl+getValue;theAudio.play();
}

（4）md5.js文件内容如下：

var MD5 = function (string) {function RotateLeft(lValue, iShiftBits) {return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));}function AddUnsigned(lX,lY) {var lX4,lY4,lX8,lY8,lResult;lX8 = (lX & 0x80000000);lY8 = (lY & 0x80000000);lX4 = (lX & 0x40000000);lY4 = (lY & 0x40000000);lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);if (lX4 & lY4) {return (lResult ^ 0x80000000 ^ lX8 ^ lY8);}if (lX4 | lY4) {if (lResult & 0x40000000) {return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);} else {return (lResult ^ 0x40000000 ^ lX8 ^ lY8);}} else {return (lResult ^ lX8 ^ lY8);}}function F(x,y,z) { return (x & y) | ((~x) & z); }function G(x,y,z) { return (x & z) | (y & (~z)); }function H(x,y,z) { return (x ^ y ^ z); }function I(x,y,z) { return (y ^ (x | (~z))); }function FF(a,b,c,d,x,s,ac) {a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));return AddUnsigned(RotateLeft(a, s), b);};function GG(a,b,c,d,x,s,ac) {a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));return AddUnsigned(RotateLeft(a, s), b);};function HH(a,b,c,d,x,s,ac) {a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));return AddUnsigned(RotateLeft(a, s), b);};function II(a,b,c,d,x,s,ac) {a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));return AddUnsigned(RotateLeft(a, s), b);};function ConvertToWordArray(string) {var lWordCount;var lMessageLength = string.length;var lNumberOfWords_temp1=lMessageLength + 8;var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;var lNumberOfWords = (lNumberOfWords_temp2+1)*16;var lWordArray=Array(lNumberOfWords-1);var lBytePosition = 0;var lByteCount = 0;while ( lByteCount < lMessageLength ) {lWordCount = (lByteCount-(lByteCount % 4))/4;lBytePosition = (lByteCount % 4)*8;lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));lByteCount++;}lWordCount = (lByteCount-(lByteCount % 4))/4;lBytePosition = (lByteCount % 4)*8;lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);lWordArray[lNumberOfWords-2] = lMessageLength<<3;lWordArray[lNumberOfWords-1] = lMessageLength>>>29;return lWordArray;};function WordToHex(lValue) {var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;for (lCount = 0;lCount<=3;lCount++) {lByte = (lValue>>>(lCount*8)) & 255;WordToHexValue_temp = "0" + lByte.toString(16);WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);}return WordToHexValue;};function Utf8Encode(string) {string = string.replace(/\r\n/g,"\n");var utftext = "";for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n);if (c < 128) {utftext += String.fromCharCode(c);}else if((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192);utftext += String.fromCharCode((c & 63) | 128);}else {utftext += String.fromCharCode((c >> 12) | 224);utftext += String.fromCharCode(((c >> 6) & 63) | 128);utftext += String.fromCharCode((c & 63) | 128);}}return utftext;};var x=Array();var k,AA,BB,CC,DD,a,b,c,d;var S11=7, S12=12, S13=17, S14=22;var S21=5, S22=9 , S23=14, S24=20;var S31=4, S32=11, S33=16, S34=23;var S41=6, S42=10, S43=15, S44=21;string = Utf8Encode(string);x = ConvertToWordArray(string);a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;for (k=0;k<x.length;k+=16) {AA=a; BB=b; CC=c; DD=d;a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);c=FF(c,d,a,b,x[k+2], S13,0x242070DB);b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);c=FF(c,d,a,b,x[k+6], S13,0xA8304613);b=FF(b,c,d,a,x[k+7], S14,0xFD469501);a=FF(a,b,c,d,x[k+8], S11,0x698098D8);d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);a=FF(a,b,c,d,x[k+12],S11,0x6B901122);d=FF(d,a,b,c,x[k+13],S12,0xFD987193);c=FF(c,d,a,b,x[k+14],S13,0xA679438E);b=FF(b,c,d,a,x[k+15],S14,0x49B40821);a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);d=GG(d,a,b,c,x[k+6], S22,0xC040B340);c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);d=GG(d,a,b,c,x[k+10],S22,0x2441453);c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);d=HH(d,a,b,c,x[k+8], S32,0x8771F681);c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);b=HH(b,c,d,a,x[k+6], S34,0x4881D05);a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);a=II(a,b,c,d,x[k+0], S41,0xF4292244);d=II(d,a,b,c,x[k+7], S42,0x432AFF97);c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);b=II(b,c,d,a,x[k+5], S44,0xFC93A039);a=II(a,b,c,d,x[k+12],S41,0x655B59C3);d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);b=II(b,c,d,a,x[k+1], S44,0x85845DD1);a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);c=II(c,d,a,b,x[k+6], S43,0xA3014314);b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);a=II(a,b,c,d,x[k+4], S41,0xF7537E82);d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);b=II(b,c,d,a,x[k+9], S44,0xEB86D391);a=AddUnsigned(a,AA);b=AddUnsigned(b,BB);c=AddUnsigned(c,CC);d=AddUnsigned(d,DD);}var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);return temp.toLowerCase();
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.value_div{width: auto;height: auto;justify-content: center;align-items: center;}.home_div{background: #dbdcda;display: flex;flex-direction: row;width: 100%;height: 100%;justify-content: center;align-content: center;align-items: center;margin: 0px;}body,html{width: 100%;height: 100%;margin: 0px;}label{font-size: 18px;min-width: 20px;text-align: center;}input{border-width: 0px;display: inline;font-size: 17px;width: 100%;height: 100%;margin-left: 2px;margin-right: 2px;color: black;}table{background: #ccfffc;align-items: center;align-content: center;height: 300px;}td{text-align: center;vertical-align: middle;align-content: center;align-items: center;background: #ffeee6;margin: 3px;}tr{width: 100%;}b{font-size: 18px;}</style>
</head>
<script src="staticResource/publicFunction.js"></script>
<script src="staticResource/MD5.js"></script>
<script src="staticResource/jquery-2.1.4.min.js"></script>
<body>
<div class="home_div"><div class="value_div"><table width="700"><tr><td colspan="4"><b><p style="text-align: center; width: 100%; font-size: 25px; ">一个简洁翻译网页</p></b></td></tr><tr><td><label>输入内容:</label></td><td><input id="sendMessage" placeholder="请输入要翻译的内容" type="text" size="35"><br></td><td><button onclick="doRead('sendMessage','theAudio')"><b>阅读</b></button></td><td><label id="inputLanguageType">未识别</label></td></tr><tr><td><label>返回结果:</label></td><td><input type="text" readonly="readonly" id="showResponseValue" size="35"></input></td><td><button onclick="doRead('showResponseValue','theAudio')"><b>阅读</b></button></td><td><label id="showLanguageType">未识别</label></td></tr><tr><td colspan="4" style="width: 100%; align-content: center;"><button id="goTran" style=" text-align: center; width: 100%; font-size: 20px; ">点击翻译</button></td></tr></table><audio id="theAudio"></audio></div>
</div>
<script type="text/javascript">var appid = '20230207001553767';var key = 'yMT9XeB9SMChihDRw2ak';var salt = (new Date).getTime();var from = 'auto';var to = 'auto';$(function(){//翻译$("#goTran").click(function(){var query = $("#sendMessage").val();if (query.toString()=='') {return;}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) {show=document.getElementById('showResponseValue');show.value=data.trans_result[0].dst;ResFrom=data.from;ResTo=data.to;FType=document.getElementById('inputLanguageType');TType=document.getElementById('showLanguageType');FType.innerHTML='语言类型:'+ResFrom;TType.innerHTML='语言类型:'+ResTo;}});});});$(function () {$('#sendMessage').keydown(function (event) {if (event.keyCode==13){var query = $("#sendMessage").val();if (query.toString()=='') {return;}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) {show=document.getElementById('showResponseValue');show.value=data.trans_result[0].dst;ResFrom=data.from;ResTo=data.to;FType=document.getElementById('inputLanguageType');TType=document.getElementById('showLanguageType');FType.innerHTML='语言类型:'+ResFrom;TType.innerHTML='语言类型:'+ResTo;}});}});});</script>
</body>
</html>

测试

本章至此结束！

制作不易，各位大哥大姐帮帮忙点个赞！

前端js调用百度翻译api接口相关推荐

【2019-07-23】]python3 把日语翻译为中文调用百度翻译API接口及API申请使用教程
点击申请百度翻译API,得到一个你自己的API账户. 点击查看申请教程,感谢教程原作者. API官网提供了一个python2的使用接口的demo还有详细的解释文档想用python3完成,代码几乎照搬 ...
python百度翻译api申请网页版_python3调用百度翻译api接口实现全过程
现在很都平台的翻译api接口都开始收费了,比如谷歌.微软.yandex等等,注册非常麻烦,而且要钱,目前就百度还剩下一个最基础的翻译api不需要钱,今天我要和大家分享的是怎样使用python3调用百度 ...
python调用百度翻译-Python 调用百度翻译API
由于实习公司这边做的是日文app,有时要看看用户反馈,对于我这种五十音图都没记住的人,表示百度翻译确实还可以.但不想每次都复制粘贴啊,google被墙也是挺蛋疼的事,所以用python结合baidu ...
python百度翻译接口_python3 调用百度翻译API翻译英文
自行申请百度开发者账号import importlib,sys,urllib importlib.reload(sys) import urllib.request import json #导入js ...
【Unity】百度翻译API接口实时翻译功能
原文:https://www.cnblogs.com/vaevvaev/p/9037076.html 使用到Newtonsoft.Json和UnityEngine(若非Unity,相关接口是原文的Ht ...
python调用百度翻译-python3调用百度翻译API实时翻译的实例代码
python3调用百度翻译API实现实时翻译今天需要做一个翻译的工具,找到之前写过的有道翻译,已经不能用了,最后看到百度翻译还不错,不过官方版本是Python2,我需要Python3,就自己写了一个 ...
js 使用百度翻译api demo
js 使用百度翻译api demo 详情请看官网 https://api.fanyi.baidu.com/ 我所使用的是通用翻译api 各语言: <!doctype html> <h ...
【新手】基于C++Qt5通过调用百度翻译API制作简易翻译工具
基于C++Qt5通过调用百度翻译API制作简易翻译工具目录基于C++Qt5通过调用百度翻译API制作简易翻译工具写在前面步骤: 1.注册百度翻译开放平台账号并开通翻译服务 2.下载安装Qt5和 ...
Pepper/Nao中级教程：第五章 Pepper/Nao机器人如何调用百度翻译API
关于Naoqi之家欢迎访问Naoqi之家,一个提供Pepper/Nao机器人中文开发手册的站点. http://www.naoqi.net 5.1 目标我希望让机器人做翻译,但是Naoqi自身是没 ...