技术选型关键词:  [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 实现国际化的更多相关文章

  1. struts2 + jquery + json 简单的前后台信息交互

    ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...

  2. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  3. JQuery + JSON作为前后台数据交换格式实践

    JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...

  4. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  5. struts2+jquery+json集成

    以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步 ...

  6. jQuery+JSON+jPlayer实现QQ空间音乐查询

    演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用j ...

  7. echart+jquery+json统计TP数据

    由于工作需要,需要统计交易数据的TP50,TP90,TP95,TP99.采用的前端技术是jquery+json+echart. 一.TP定义(谷歌) Calculating TP is very si ...

  8. 【转】jQuery之前端国际化jQuery.i18n.properties

    jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties

  9. Struts2+JQuery+Json登陆实例

    Struts2+JQuery+Json登陆实例 博客分类: Struts2   在搭建之前.. 首先,需要准备struts2.0框架的5个核心包, 以及jsonplugin-0.32.jar 以及js ...

随机推荐

  1. Windows 查看并关闭占用指定端口的程序

    windows关闭端口的小工具: 链接:https://pan.baidu.com/s/1ZGL4cdSluy0lbi3tDERUvA 提取码:spxy 查看指定端口的使用情况 netstat -an ...

  2. 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 ...

  3. hive启动报错(整合spark)

    spark整合hive后,hive启动报错: ls: cannot access /export/servers/spark/lib/spark-assembly-*.jar: No such fil ...

  4. 【PAT甲级】1043 Is It a Binary Search Tree (25 分)(判断是否为BST的先序遍历并输出后序遍历)

    题意: 输入一个正整数N(<=1000),接下来输入N个点的序号.如果刚才输入的序列是一颗二叉搜索树或它的镜像(中心翻转180°)的先序遍历,那么输出YES并输出它的后序遍历,否则输出NO. t ...

  5. input和button 高度不一致问题

    原因是 input和button的高度计算不一样, input高度不包括border. button高度包括border. 解决方法: 1.box-sizing:border-box: 2.borde ...

  6. php cli 下 php.ini 配置

    // 查看phpcli 模式下 扩展 php -m // 查看php cli 版本 php -v 查看命令行的ini路径,命令行下运行 php --ini Loaded Configuration F ...

  7. C/C++网络编程5——实现基于TCP的服务器端/客户端2

    三次握手过程详解: 1:客户端的协议栈向服务器端发送SYN包,并告诉服务器端当前放送序号为j,客户端进入SYNC_SEND状态. 2:服务器端的协议栈收到这个包以后,和客户端进行ACK应答,应答值为j ...

  8. Spring Boot 2.x教程-Thymeleaf 原理是什么

    layout: post title: Spring Boot 2.x教程-Thymeleaf 原理是什么 categories: SpringBoot description: Spring Boo ...

  9. git 从创建到推送到远程,到拉取,实操

    https://www.liaoxuefeng.com/wiki/896043488029600/900003767775424 初始化 git init 添加所有文件到暂存区 git add . c ...

  10. eclipse 快速隐藏所有方法的代码块

    java开发中往往一个class文件中会有很多方法,一个方法的实现代码有时候特别长 我个人就喜欢把无关的方法代码全部隐藏起来,只打开当前需要编辑的代码就行了(不喜欢看导航视图,容易头晕) Ctrl+s ...