[经验] 使用 jQuery+JSON 实现国际化
技术选型关键词: [spring boot] [jQuery] [JSON] [JSP]
前言: 关于国际化, 我在一开始的时候就有一个误解, 我认为所谓国际化就是编写一段高技术含量的代码, 然后这段代码会帮助我们实现自动翻译............
emmm,,事实证明我还是太年轻了.....
其实呢, 所谓的国际化, 就是为这个项目装准备两种语言甚至更多语言的文本翻译文件, 意思就是, 翻译是必须的, 手动是不可少的, 国际化其实没有那么高大上, 就只是切换字符串文本而已!!!!!!!
举个例子: 比如说你要做中文和英文国家的国际化, 那么你要做的就是
一: 在根目录上新建一个文件夹, 来保存语言包
所谓的语言包, 就是一种键名相同, 但是值的名字不同的文件的文件夹, 比如在上图种, index_en.json 里面存放的就是英文的文本, 如果一个项目很大的话, 还是建议将不同的网页上的语言抽象出来统一管理, 这样也方便后期的维护, 例如 上图的语言文件的意思就是: index页面的 中文(cn) 和 英文(en) 的翻译文本.
来, 用一个比较详细的例子对上文进行验证:
(1) 首先, 准备一个页面, 我就用最简单的一个登录页面来做为例子啦
如你所见, 这张图片上的文本有: 登录 用户名 密码 立刻登录 国家(地区) 中国(zh-CN) 美国(en-US)
(2) 然后我们就在 webapp / resource / i18n 目录下新建两个 json 文件, 一个叫 login_cn.json, 一个叫 login_en.json , 并添加对应的 map 数据
就是酱紫啦
紫色的英文是文件的 KEY, 通过调用 KEY 就可以得到对应的绿色文本(VALUE)
二, HTML 部分的代码
emmmm 这种代码应该是可以看懂的吧,,,,,,,,,,,,
三.jQuery 代码 核心!!!!!!
emmmmm,,,,,,我猜,,,,这也应该是可以看懂的哈
OK,,,其实到这里, 一个简单且强大的国际化就可以完成啦
选中中文的时候
选中英文的时候
看, 就是这么简单啦, 当然我相信这种程度的代码量大家还是可以手敲的, 直接复制粘贴的话呢, 也未免太懒了吧.............................
嘤嘤嘤,,,想想这个过程还是十分曲折的, 毕竟自己探路的过程太痛苦了,,希望可以对需要的人有所帮助
[经验] 使用 jQuery+JSON 实现国际化的更多相关文章
- struts2 + jquery + json 简单的前后台信息交互
ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
- jQuery: jquery.json.js
http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...
- struts2+jquery+json集成
以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步 ...
- jQuery+JSON+jPlayer实现QQ空间音乐查询
演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用j ...
- echart+jquery+json统计TP数据
由于工作需要,需要统计交易数据的TP50,TP90,TP95,TP99.采用的前端技术是jquery+json+echart. 一.TP定义(谷歌) Calculating TP is very si ...
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- Struts2+JQuery+Json登陆实例
Struts2+JQuery+Json登陆实例 博客分类: Struts2 在搭建之前.. 首先,需要准备struts2.0框架的5个核心包, 以及jsonplugin-0.32.jar 以及js ...
随机推荐
- Windows 查看并关闭占用指定端口的程序
windows关闭端口的小工具: 链接:https://pan.baidu.com/s/1ZGL4cdSluy0lbi3tDERUvA 提取码:spxy 查看指定端口的使用情况 netstat -an ...
- Codeforces Round #619 (Div. 2) B. Motarack's Birthday
Dark is going to attend Motarack's birthday. Dark decided that the gift he is going to give to Motar ...
- hive启动报错(整合spark)
spark整合hive后,hive启动报错: ls: cannot access /export/servers/spark/lib/spark-assembly-*.jar: No such fil ...
- 【PAT甲级】1043 Is It a Binary Search Tree (25 分)(判断是否为BST的先序遍历并输出后序遍历)
题意: 输入一个正整数N(<=1000),接下来输入N个点的序号.如果刚才输入的序列是一颗二叉搜索树或它的镜像(中心翻转180°)的先序遍历,那么输出YES并输出它的后序遍历,否则输出NO. t ...
- input和button 高度不一致问题
原因是 input和button的高度计算不一样, input高度不包括border. button高度包括border. 解决方法: 1.box-sizing:border-box: 2.borde ...
- php cli 下 php.ini 配置
// 查看phpcli 模式下 扩展 php -m // 查看php cli 版本 php -v 查看命令行的ini路径,命令行下运行 php --ini Loaded Configuration F ...
- C/C++网络编程5——实现基于TCP的服务器端/客户端2
三次握手过程详解: 1:客户端的协议栈向服务器端发送SYN包,并告诉服务器端当前放送序号为j,客户端进入SYNC_SEND状态. 2:服务器端的协议栈收到这个包以后,和客户端进行ACK应答,应答值为j ...
- Spring Boot 2.x教程-Thymeleaf 原理是什么
layout: post title: Spring Boot 2.x教程-Thymeleaf 原理是什么 categories: SpringBoot description: Spring Boo ...
- git 从创建到推送到远程,到拉取,实操
https://www.liaoxuefeng.com/wiki/896043488029600/900003767775424 初始化 git init 添加所有文件到暂存区 git add . c ...
- eclipse 快速隐藏所有方法的代码块
java开发中往往一个class文件中会有很多方法,一个方法的实现代码有时候特别长 我个人就喜欢把无关的方法代码全部隐藏起来,只打开当前需要编辑的代码就行了(不喜欢看导航视图,容易头晕) Ctrl+s ...