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

不会写骚年的代码

已于 2023-05-17 22:42:33 修改

阅读量3.3k

点赞数 12

分类专栏：前端文章标签： html css 前端

于 2023-02-12 16:04:18 首次发布

本文链接：https://blog.youkuaiyun.com/m0_46043168/article/details/128995977

版权

前端专栏收录该内容

1 篇文章

订阅专栏

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>