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

最新推荐文章于 2024-05-15 13:09:23 发布

Crystal Cui

最新推荐文章于 2024-05-15 13:09:23 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： jquery 多语言

本文链接：https://blog.csdn.net/qq_34777858/article/details/111872328

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

解决方案：

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地区的语言。

Crystal Cui

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现支持同一网站支持多种语言（即不同地区用户）

背景：如果台湾（中文繁体），大陆（中文简体），英国（英语）三个地区的用户用到同一个网站。解决方案：3个war包部署到三个服务器上同一个war包部署，在一套系统里支持多语言（一个HTML/JSP页面支持多语言）方案2更节约服务器成本。具体措施：...
复制链接

扫一扫