java开发多国语言互译

对于一枚对英语盲的人，一旦遇着不会的单词或者句子；以前上学时，老师总是叫我们用词典。现在网络发达，总喜欢上网去度娘了，但是有好几次回老家 想百度就是没网的那种伤心尤然心生，所以我自制了一款适合我自己的百度翻译。
话不多说，先附上效果图

一、网页内容部分

<div class="title">
    JAVA 开发多国语言互译系统~小小涛
    </div>
    <div class="center">
        <div class="content">
            <input type="text" id="text" autocomplete="off">
        </div>
        <div class="centers">
            <select name="from" id="from">
                <option value="auto">智能识别</option>
                <option value="zb">中文</option>
                <option value="wyw">文言文</option>
                <option value="yue">粤语</option>
                <option value="en">英语</option>
                <option value="ru">俄语</option>
                <option value="de">德语</option>
                <option value="jp">日语</option>
                <option value="kor">韩语</option>
                <option value="fra">法语</option>
                <option value="th">泰语</option>
                <option value="ara">阿拉伯语</option>
                <option value="pt">葡萄牙语</option>
            </select>
            <img alt="右箭头" src="images/sign_in.png">
            <select name="to" id ="to">
                <option value="en">英语</option>
                <option value="zh">中文</option>
                <option value="wyw">文言文</option>
                <option value="yue">粤语</option>
                <option value="ru">俄语</option>
                <option value="de">德语</option>
                <option value="jp">日语</option>
                <option value="kor">韩语</option>
                <option value="fra">法语</option>
                <option value="th">泰语</option>
                <option value="ara">阿拉伯语</option>
                <option value="pt">葡萄牙语</option>
            </select>
            <a href="javascript:query();" id="btn" >翻译</a>
        </div>
        <div id="result" class="text">
            <div class="r-text"></div>
            <div class="audio"></div>
        </div>
    </div>

二、css样式和Jquery代码片段

<style type="text/css">
    *{padding:0;margin:0;}
    body,html{width:100%;height:100%;}
    body{background:url(images/bg.jpg) no-repeat center;background-position:100% 100%;}
    /*titile start*/
    .title{width:100%;height:60px;background:rgba(0,0,0,.3);text-align:center;line-height:60px;font-size:18px;color:pink;}
    /*title end*/
    .center{width:600px;height:400px;margin:100px auto;}
    /*content start*/
    .content #text{width:596px;height:96px;border:2px green solid;text-indent:16px;font-size:18px;outline:none;}
    .centers{background:rgba(0,0,0,.2);padding:0 50px;margin:10px 0;}
    .centers select{width:120px;height:40px;padding: 0 10px;font-size:16px;}
    .centers img{margin:0 25px -10px;}
    .centers a{display:block;width:100px;hieght:40px;line-height:40px;background:#60d9ff;margin:0 0 0 10px;float:right;text-align:center;color:#fff;text-decoration:none;border-radius:10px;}
    /*content end*/
    #result{border:2px green solid;width:596px;height:240px;position:relative;}
    .r-text{color:#f00;font-weight:bold;position:absolute;font-size:22px;padding:20px;}
    .audio{width:19px;height:17px;background:url("images/sound-1.png");position:absolute;bottom:5px;left:5px;}
    .audio:hover{background:url("images/sound-2.png"); cursor:pointer;}
    </style>

-----------------------------------------------------
<script type="text/javascript">
    function query(){
        //获取输入框的值
        var text = $("#text").val();
        //获取下拉框选择时的值
        var from = $("#from").val();
        var to = $("#to").val();
        $.ajax({
            url:"trans",
            type:"post",
            data:{"text":text,"from":from,"to":to},
            success:function(result){
                //json对象
                var StringJSON = $.parseJSON(result)
                var content = (StringJSON.trans_result)[0].dst;
                $(".r-text").html(content);
                function audioPlay(){
                    var str = content.replace(/\s+/g,"_");
                    //粤语跟文言文
                    if(to=="wyw"){
                        to="zh";
                    }else if(to=="yue"){
                        to="cte";
                    }
                    var obj = $('<audio src="http://fanyi.baidu.com/gettts?lan='+to+'&amp;text='+str+'&amp;spd=5&amp;sorce=web" autoplay></audio>');
                    $("audio").remove();
                    $("body").append(obj);
                    $("#text").select();
                }
                $(".audio").click(function(){
                    audioPlay();
                });
            }
        });
    }
    </script>

光这些是远远不够的，接下来就是展现java后端的NB代码咯

@WebServlet("/trans")
public class TransAction extends HttpServlet{
    //百度翻译的接口 首先要去注册下（免费的哦）
    private String Appid = "";
    private String key ="";

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        //获取前端的传递来的数据
        String text = req.getParameter("text");
        String from = req.getParameter("from");
        String to   = req.getParameter("to");
        TransApi api = new TransApi(Appid, key);
        String TransResult = api.getTransResult(text, from, to);
        resp.getWriter().print(TransResult);
    }

}

ps.想要源码的小伙伴 请私聊我