使用百度接口制作一个翻译的小例子

首先，你得在在百度翻译开放平台注册个开发者账号，先搜索如下：
然后，就一步步按照它提示创建一个云应用。
不多说废话了，先看最后样式：
直接上码，咱的注释很全，不解释。
<!doctype html>
<head>
    <meta charset="utf-8"/>
    <!-- bootstrap -->
    <!-- <link href="../../../../plugin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" /> -->
    <!-- layui -->
    <link href="../../../plugin/layui/layui/css/layui.css" rel="stylesheet" type="text/css" media="all" />
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .layui-form{
        width: 90%;
        margin-top: 20px; 
    }
    </style>
</head>
<body style="background: #d8bfd8">
<!-- 百度翻译接口文档：http://api.fanyi.baidu.com/api/trans/product/apidoc -->
<!-- 案例下载：http://appcdn.fanyi.baidu.com/api/demo/js-sdk.zip -->
<div class="layui-form">
    <!-- 两分布局 -->

      <div class="layui-form-item layui-form-text">
        <div class="layui-input-block">
          <textarea name="desc" id="source" placeholder="输入或粘贴……" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <select id="trans_type" name="trans_type" lay-verify="required">
            <option value="auto">自动转换</option>
            <option value="en">中》英</option>
            <option value="jp">中》日</option>
            <option value="kor">中》韩</option>
            <option value="fra">中》法</option>
            <option value="ru">中》俄</option>
            <option value="ara">中》阿拉伯</option>
            <option value="el">中》希</option>
            <option value="hu">中》匈牙利</option>
            <option value="rom">中》罗马尼亚</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <div class="layui-input-block">
          <textarea name="desc" id="result" placeholder="翻译结果……" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-input-block">
          <button id="translate" class="layui-btn">点击翻译</button>
          <button id="reset" class="layui-btn layui-btn-warm">重置</button>
      </div>

    <!-- <div class="layui-col-md6"></div> -->
</div>
<!-- 百度静态资源库 -->
<!-- <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> -->
<!-- JSMD5工具类 -->
<script src="md5.js"></script>
<!-- JQ -->
<script src="../../../plugin/js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap -->
<!-- <script src="../../../../plugin/js/bootstrap.min.js"></script> -->
<!-- layui模块加载 -->
<script src="../../../plugin/layui/layui/layui.js"></script>
<script type="text/javascript">
//layui模块加载
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
});
//清空
$("#reset").click(function(){
    $("textarea[name='desc']").val("");
});
//开始翻译
$("#translate").click(function(){
    var appid = '你的appid';    //APPID
    var key = '你的key';   //KEY
    var salt = (new Date).getTime();    //时间戳随机数
    var query = $("#source").val();     //需要翻译的字符串
    // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
    var from = 'auto';                      //源语言自动检测
    var to = $("#trans_type").val();        //目标语言
    var str1 = appid + query + salt + key;  //拼接请求字符串
    var sign = MD5(str1);                   //全部数据打包生成MD5
    $.ajax({
        url: 'https://fanyi-api.baidu.com/api/trans/vip/translate',
        type: 'get',
        dataType: 'jsonp',  //跨域访问
        data: {
            q: query,       //需要查询的字符串
            appid: appid,   //appID
            salt: salt,     //随机数
            from: from,     //源语言
            to: to,         //目标语言
            sign: sign      //全部信息的MD5签名
        },
        success: function (data) {
            //{"from":"en",
            // "to":"zh",
            // "trans_result":[{"src":"apple",
            //                  "dst":"苹果"}]}
            // var res = JSON.stringify(data);  //返回结果对象转换json
            $("#result").val(data.trans_result[0].dst);
        },
        error: function (data){
            console.log("错误信息："+JSON.stringify(data));
        }
    });
});
</script>
</body>
至于样式的实现，借助了layui和jQuery。
使用百度接口制作一个翻译的小例子

猜你喜欢
