请问在HTML页面里怎么通过jQuery读取本地工程内的JSON文件里的value值?

1. 场景: 需要通过读取JSON文件内部的value值来对HTML实现语言切换

伪码:

JSON文件内容:

{"key1":"value1", "key2":"value2", "key3":"value3'}

HTML部分代码

< lable id="id" >< /lable>
var dataObject = i18n.JSON
$("#id").test(dataObject.key1)

但是我发现这样我没法赋值给HTML标签, 我有试过使用

jquery.i18n.properties.js
angular-translate.js

但是由于没有一个完整的例子, 我都没法成功的使用.
我也有试过使用

@Configuration
public class MessageSourceConfig {
    @Bean(name = "messageSource")
    public ResourceBundleMessageSource getMessageSource() throws Exception {
        ResourceBundleMessageSource resourceBundleMessageSource = new ResourceBundleMessageSource();
        resourceBundleMessageSource.setDefaultEncoding("UTF-8");
        resourceBundleMessageSource.setBasenames("messages/messages");
        return resourceBundleMessageSource;
    }
}

但是没法动态修改 messages/messages 路径, 导致无法实时切换语言, 很难过, 所以现在把目标放在读取JSON文件上, 虽然在这之前我有一个成功的例子,就是

var type = "cn";
    //默认加载的语言
    $().ready(function () {
        changing(type);
    });

    //修改显示的语言
    $("#languageSelect").click(function () {
        var type = $("#languageSelect").val();
        changing(type);
    });

    function changing(type) {
        $("#country").text(translate[0][type]);
    }

    var translate = [
        { en:"China", cn:"中国" }
    ]

但是这种方法似乎很难维护, 尤其是我需要切换几千条数据的时候
所以, 现在我应该怎么用jQuery读取对应的JSON文件,通过 key 获取 value 在赋值给 HTML 标签呢?