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" οnchange="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"});     
            }
        }
    });

設置好後再登錄就會出現下面的中英文切換的效果