JAVA WEB上的多语言切换

因为在项目目前是验证demo阶段,所以功能能够支持的越多越好

so leader让我添加一个中英文切换功能

经过各种search后,初步实现了这个功能,下面把方法告诉给大家,仅供参考,如果有更好的方案,欢迎告知

1.相关jar包下载

下载jquery.locale.js,下载地址为  https://github.com/coderifous/jquery-localize   将下载后的包加入到工程中即可使用.

然后web-xml中要加上

<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.json</url-pattern>
</servlet-mapping>

用来拦截json格式的数据,因为配置文件是以json文件的格式进行存储的.

2.中英文切换方案

a)  json文件

配置好相关的jar包和web-xml后,我们在工程里对应的目录为相应的语言创建json文件,其中英文定义如下图所示,这里注意中文对应的要使用utf-8的格式进行存储(可以百度转义),否则页面会显示乱码.这里存储为text-zh.json和text-en.json两个文件

英文文件

中文文件

其中如果需要引用某个字段的中英文,则为nav.index此类样式

b)  jsp页面

在header.jsp页面上(这里demo中假设对header进行中英文切换),添加select控件,如下所示,当select值改变后,触发方法chgLang.

<select id="ddlSomoveLanguage" onchange="chgLang();">
               <option value="zh">中文</option>
               <option value="en">ENGLISH</option>
</select>

这里,假设修改中英文后,改变导航栏header.jsp的的中英文,所以还需要在nav.jsp里修改显示的值,如下所示.通过我们对每个需要显示的a标签,data-localize属性设置为对应的json文件里字段的名字,比如定义对象,就为data-localize=”nav.defineObj”.

<ul class="dropdown-menu">
                <li><a id="action-1" data-localize="nav.defineObj" href="IdeJsp/defineObjSelect.jsp"></a></li>
              <li><a data-localize="nav.defineTable" href="IdeJsp/defineTab.jsp"></a></li>
              <li><a data-localize="nav.operateSql"  href="IdeJsp/ideSql.jsp"></a></li>
</ul>

c)  js文件

js文件负责控制页面切换以及coockies记录点击语言历史的功能.其代码如下所示,文件名为language-coockies.js,其中

$("[data-localize]").localize("text", {pathPrefix:"lang", language:"en"});pathPrefix表示json文件路径的前缀,text和en对应文件名text-en.json

var name = "somoveLanguage"; 
      function  chgLang() {
 var value = $("#ddlSomoveLanguage").children('option:selected').val();
  SetCookie(name,value);
location.reload();  
       } 
      function  SetCookie(name,value){ 
  var Days = 30; //此 cookie 将被保存 30 天
          var exp = new Date();    //new Date("December 31, 9998");
          exp.setTime(exp.getTime() + Days*24*60*60*1000);
          document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
       }
    function getCookie(name)//取cookies函数   
    {
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
    }
    $(function() {
var uulanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
                if (uulanguage.indexOf("en") > -1) {
                    $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});
               }else if (uulanguage.indexOf("zh") > -1) {
                 $("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"});
              }else{
              $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});
              };        
         if (getCookie(name) != "") {
             if (getCookie(name) == "zh") {
                 $("[data-localize]").localize("text", {pathPrefix: "lang", language: "zh"}); 
            }
             if (getCookie(name) == "en") {
                 $("[data-localize]").localize("text", {pathPrefix: "lang", language: "en"});     
            }
        }
    });

设置好后再登录就会出现下面的中英文切换的效果