jquery结合html实现中英文页面切换

目的：前端（只采用thymeleaf模板+jquery）实现国际化
由：前端没有采用流行的vue.js angular 等框架，纯html不可以引用js中定义的常量
采用jquery赋值（维护2个模板（中，英）界面）直接out
方案：采用https://github.com/coderifous/jquery-localize/ 一个本地化插件
a jQuery plugin that makes it easy to internationalize your web site
步骤：

1 html

<！DOCTYPE><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Language</title><！-- 引用三个js文件 language_cookie.js实现记忆功能 下一次用户刷新界面之后 记得之前用户使用了那个语种 --><script src="jquery.js" type="text/javascript" charset="utf-8"></script><script src="jquery.localize.js" type="text/javascript" charset="utf-8"></script><script src="language_cookie.js" type="text/javascript" charset="utf-8"></script></head><body> <div class="top_lan"><select id="ddlSomoveLanguage" onchange="chgLang（）;"><option value="">LAGUAGE</option><option value="ja">日本</option><option value="en">ENGLISH</option></select> </div> <div id="prod_navright"><ul> <！-- data-localize="hpt.management" 固定写法 对应语言包文件中的key --> <li><a data-localize="hpt.management" href="hospitality_management_ja.html" >MANAGEMENT</a></li> <li><a data-localize="hpt.support" href="hospitality_support_ja.html">SUPPORT</a></li> <li><a data-localize="hpt.tutorial" href="hospitality_tutorial_ja.html">TUTORIAL</a></li> <li><a data-localize="hpt.features" href="hospitality_features_ja.html">FEATURES</a></li></ul> </div></body></html>

2 语言包文件
text-en.json

{ "hpt":{ "features": "FEATURES","tutorial": "TUTORIAL","support": "SUPPORT","management": "MANAGEMENT"}}

text-ja.json
·······
3 language_cookie.js 需要在服务器上执行本机执行无法获取需要的json文件 主要的代码 标记处的代码底层可能使用的是xmlHttpRequest实现获取.json语言包文件

var name = "somoveLanguage";function chgLang（） {var value = $（"#ddlSomoveLanguage"）.children（"option:selected"）.val（）;SetCookie（name, value）;console.log（"come in chgLang" + 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（）;console.log（"come in readly" + uulanguage）;if （uulanguage.indexOf（"en"） > -1） {$（"[data-localize]"）.localize（"text", {//**主要的代码** jquery.localize.js 底层实现切换逻辑pathPrefix: "lang",language: "en"}）; console.log（"come in en"）;} else if （uulanguage.indexOf（"ja"） > -1） {$（"[data-localize]"）.localize（"text", {pathPrefix: "lang",language: "ja"}）; console.log（"come in ja"）;} else {$（"[data-localize]"）.localize（"text", {pathPrefix: "lang",language: "en"}）;console.log（"come in moren en"）;}; //根据cookie选择语言if （getCookie（name） ！= ""） {if （getCookie（name） == "ja"） {$（"[data-localize]"）.localize（"text", {pathPrefix: "lang",language: "ja"}）;console.log（"come in cookie ja"）;}if （getCookie（name） == "en"） {$（"[data-localize]"）.localize（"text", {pathPrefix: "lang",language: "en"}）;console.log（"come in cookie en"）;}}}）;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。