JS实现支持同一网站支持多种语言（即不同地区用户）

背景：如果台湾（中文繁体），大陆（中文简体），英国（英语）三个地区的用户用到同一个网站。

解决方案：

3个war包部署到三个服务器上
同一个war包部署，在一套系统里支持多语言（一个HTML/JSP页面支持多语言）

方案2更节约服务器成本。具体措施：

创建JSP/HTML：

注意这个 <input type="hidden" id="region" name="region" />，后面有用到

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户信息管理</title>
</head><body id="main_body" class="hold-transition skin-black-light sidebar-mini"><div class="wrapper"><div class="content-wrapper" style="margin-top: 5px;"><form id="labelPrintform" name="labelPrintform" action="" method="post"><input type="hidden" id="lotControlFlagInput" name="lotControlFlag" /><input type="hidden" id="region" name="region" /><!-- box box-primary --><div class="box box-primary box-solid" style="margin-bottom: 5px;"><div class="box-header with-border"><h3 class="box-title" id="searchLable">搜索条件</h3></div><div class="box-body"><div class="form-group"><label for="searchEmpNo" id="stock_number"> 货号：<span style="color:red">*</span></label><div class="col-xs-28"><input id="localSKU" name="localSKU" class="form-control" placeholder="请输入 货号"></div><div class="col-xs-42"><button id="searchButton" type="button" class="btn btn-primary" >搜索</button></div></div><div class="form-group" id="lotGroup"><label for="lot" id="lot_number">LOT批号：<span style="color:red">*</span></label><div class="col-xs-28"><input id="lots" name="lots" class="form-control" placeholder="请输入LOT批号"></div><div class="col-xs-42" id="lotAddDiv"> <button id="addLotButton" type="button" class="btn btn-primary" onclick="addLot()">添加Lot</button></div>    </div><div class="form-group"><label for="grossWeight" id="grossWeightLable">毛重(KG)：</label><div class="col-xs-28"><input id="grossWeight" name="grossWeight" class="form-control" placeholder="请输入毛重"></div>                          </div><div class="form-group"><label for="quantity" id="quantityLable">箱入数量：<span style="color:red">*</span></label><div class="col-xs-28"><input id="quantity" name="quantity" class="form-control" placeholder="请输入箱入数量"></div>                           </div></div><div class="box-footer"><div class="form-group" style="margin-bottom: 0px;"><div class="col-md-offset-44" style="padding-left: 5px;"><button id="printButton" type="button" disabled="disabled" >导出pdf</button></div></div></div></div></form></div></div></body>

分别创建不同语言对应的JS，JS保存的json数据，以key-value形式存放语言内容

以zh_hk.js为例：

if (window) {if (window.locale == null) {window.locale = {};}
} else {alert('init locale error');
}var zh_hk = {searchLable: 'Search Condition',searchButton: 'Search',stock_number: '3M Stock Number:<span style="color:red">*</span>',placeholder_stock_number: 'please input Stock Number',lot_number: 'LOT Number:<span style="color:red">*</span>',placeholder_lot_number: 'please input LOT Number',addLotButton: 'Add Lot',grossWeightLable: 'Gross Weight(KG):<span style="color:red">*</span>',placeholder_grossWeightLable: 'please input Gross Weight',quantityLable: 'Quantity:<span style="color:red">*</span>',placeholder_quantityLable: 'please input Quantity',printButton: 'Export PDF',logout: 'LogOut',};window.locale['zh_hk'] = zh_hk;

加载/渲染页面时，载入不同语言内容

$(function() {
init();//初始化渲染页面//其他JS功能});function init() {//通过异步获取语言类型$.ajax({type: "get",url: realPath + "/labelPrint/getAjaxSession.do",data: {sessionName: 'region'},async: false,success: function(data) {if (null != data && "" != data && undefined != data) {$('#region').val(data);
//在JSP页面hidden了region变量，此处赋值，渲染页面时获取根据它来选择语言rendorLocal();} else {alert("对不起,region未緩存");}},error: function() {alert("ajax error");}});}
var rendorLocal = function() {var region = $('#region').val();
//在JSP页面hidden了region变量，此处赋值，渲染页面时获取根据它来选择语言if ('HK' == region) {window.localeCode = 'zh_hk';$('#productionDate').parent().parent().remove();$('#subLots').parent().parent().remove();var localeMap = locale[window.localeCode]$('#searchLable').html(localeMap.searchLable);$('#searchButton').html(localeMap.searchButton);$('#stock_number').html(localeMap.stock_number);$('#lot_number').html(localeMap.lot_number);$('#grossWeightLable').html(localeMap.grossWeightLable);$('#quantityLable').html(localeMap.quantityLable);$('#printButton').html(localeMap.printButton);$('#addLotButton').html(localeMap.addLotButton);$('input[name="localSKU"]').attr('placeholder', localeMap.placeholder_stock_number);$('input[name="lots"]').attr('placeholder', localeMap.placeholder_lot_number);$('input[name="grossWeight"]').attr('placeholder', localeMap.placeholder_grossWeightLable);$('input[name="quantity"]').attr('placeholder', localeMap.placeholder_quantityLable);$('.navbar-right>li>a').html(localeMap.logout);} else {window.localeCode = 'zh_cn';}}

课外小知识：参考 Jquery入门

$(function() {
});

$(document).ready(function() {
});

最后在页面引入JQ.js和zh_hk.js,zh_cn.js,即可支持2种语言

总结下思路：

JSP页面每个出现文字的标签附上id或class等易于辨别的标签，方便渲染时一一对应赋值，如： $('#addLotButton').html(localeMap.addLotButton);
$('input[name="localSKU"]').attr('placeholder', localeMap.placeholder_stocknumber）；

加载页面首先异步获取region，在根据region判断使用哪种语言（也可以使用其他方式，以后遇到再补充）window.localeCode = 'zh_hk';
var localeMap = locale[window.localeCode]；则接下来通过localeMap获取的就是hk地区的语言。

JS实现支持同一网站支持多种语言（即不同地区用户）相关推荐

DRG/DIP分组器HIS、电子病历、病案等系统调用接口说明，支持java c#等多种语言，有c#代码参考
HIS.电子病历.病案系统 DRG/DIP分组器调用接口说明标准restful webservice 支持java c#等语言沈阳征先科技有限公司分组器调用说明: 输入参数.输出参数为JSON串 ...
免费开源的高精度OCR文本提取，支持 100 多种语言、自动文本定位和脚本检测，几行代码即可实现离线使用（附源码）
免费开源的高精度OCR文本提取,支持 100 多种语言.自动文本定位和脚本检测,几行代码即可实现离线使用(附源码). 要从图像.照片中提取文本吗?是否刚刚拍了讲义的照片并想将其转换为文本?那么您将需要 ...
GitHub开源：支持100多种语言的OCR文字识别
之前为给位朋友分享过:GitHub开源:17M超轻量级中文OCR模型.支持NCNN推理,该项目仅仅支持中文OCR识别,本篇博文将分享支持100多种语言的OCR文字识别项目:Tesseract OCR. ...
python实现：命令行翻译.string 和 .xml 文件 -- mkTranslate：支持多种语言的互译
[github传送门] 功能翻译文本文件翻译.strings文件翻译.xml文件翻译文本支持谷歌翻译支持有道翻译支持 i18ns.com 聚合翻译会自动检测当前网络情况,从而决定使用 ...
Android 输入英语单词实现（post网络请求）在线翻译，支持多种语言翻译
输入英语单词实现(post网络请求)在线翻译,支持多种语言翻译首先在xml文件上界面布局采用LinearLayout来布局界面,并添加一个按钮来进行网络请求翻译,在添加一个EditText来输入我 ...
java菜单栏支持多种语言,多语工具包multilanguage（java版）
1.多语系统介绍多语系统用于向不同的用户展示不同的语言,比如大陆用户习惯使用简体,港台用户习惯繁体,美国用户习惯英语:用户可以根据自己的喜好自由切换语言. 下面来看看提供多语功能的产品: 然而这些都 ...
Code Runner for VS Code 突破 1000 万下载量！支持运行超过 40 种语言
记得三年多前,韩老师那时还在写 PHP(是的,没错!在微软写 PHP),同时需要写 Python 和 Node.js .所以在那时,支持多种语言的 VS Code 已经是笔者的主力编辑器了.唯一不足的 ...
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰"繁体中文").传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语 ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...

JS实现支持同一网站支持多种语言（即不同地区用户）

创建JSP/HTML：

分别创建不同语言对应的JS，JS保存的json数据，以key-value形式存放语言内容

加载/渲染页面时，载入不同语言内容

课外小知识：参考 Jquery入门

最后在页面引入JQ.js和zh_hk.js,zh_cn.js,即可支持2种语言

JS实现支持同一网站支持多种语言（即不同地区用户）相关推荐

最新文章

热门文章

JS实现支持同一网站支持多种语言（即不同地区用户）

创建JSP/HTML：

分别创建不同语言对应的JS，JS保存的json数据，以key-value形式存放语言 内容

加载/渲染页面时，载入不同语言内容

课外小知识：参考 Jquery入门

最后在页面引入JQ.js和zh_hk.js,zh_cn.js,即可支持2种语言

JS实现支持同一网站支持多种语言（即不同地区用户）相关推荐

最新文章

热门文章

分别创建不同语言对应的JS，JS保存的json数据，以key-value形式存放语言内容