JSON、AJAX、i18n

最新推荐文章于 2022-06-25 18:38:45 发布

白开水最甜

最新推荐文章于 2022-06-25 18:38:45 发布

阅读量116

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/weixin_51994374/article/details/119871569

版权

javaweb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JSON

一、含义

二、JSON在客户端（JavaScript）中的使用

JSON

一、含义

1、一种轻量级的数据交换格式

2、数据交换是指客户端与服务器之间业务数据的传递格式

二、JSON在客户端（JavaScript）中的使用

1、json的定义与访问

<script type="text/javascript">
        //json的定义
        var jsonObj={
            "key1":12,
            "key12":"abc",
            "key3":true,
            "key4":[4,"abc",false],
            "key5":{
                "key5_1":551,
                "key5_2":"key5_2_value"
            },
            "key6":[
                {"key6_1":661,"key6_2":"value662"},
                {"key6_3":663,"key6_4":"value664"}
            ]
        }
        //json的访问
        alert(jsonObj.key5.key5_2);

2、json的两个常用的方法

json的存在有两种形式：

1、对象（当操作json中的数据的时候，使用对象格式）

2、字符串（在客户端和服务器之间进行数据交换的时候，使用json字符串）

两个方法：

1、JSON.stringify()-->转换为字符串

2、JSON.parse()-->转换为json对象

三、JSON在服务器（java）中的使用

1、javabean和json的互传

//1、javabean和json的互传
    @Test
    public void test1(){
        Person person=new Person(1,"国哥");
        //创建Gson实例
        Gson gson=new Gson();
        //转为字符串
        String personJsonString = gson.toJson(person);
        System.out.println(personJsonString);
        //转回对象
        Person person1 = gson.fromJson(personJsonString, Person.class);
        System.out.println(person1);
    }

2、List和json的互传

 //2、List和json的互传
    @Test
    public void test02(){
        List<Person> personList=new ArrayList<>();
        personList.add(new Person(1,"国哥"));
        personList.add(new Person(2,"康师傅"));
        Gson gson=new Gson();
        //转成字符串
        String s = gson.toJson(personList);
        System.out.println(s);
        //转回对象
        Object o = gson.fromJson(s, new TypeToken<ArrayList<Person>>() {
        }.getType());
        System.out.println(o);

    }

3、map与json的互传

//3、map与json的互传
    @Test
    public void test03(){
        Map<Integer,Object> map=new HashMap<>();
        map.put(1,new Person(1,"国哥"));
        map.put(2,new Person(2,"康师傅"));
        Gson gson=new Gson();
        //转为字符串
        String s = gson.toJson(map);
        System.out.println(s);
        //转回对象
        Object o = gson.fromJson(s, new TypeToken<HashMap<Integer, Object>>() {
        }.getType());
        System.out.println(o);

    }

AJAX请求

一、含义

ajax是一种浏览器通过js异步发起请求，局部更新页面的技术

二、原生AJAX请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function ajaxRequest() {
            //1、创建XMLHttpRequest
            var xmlHttpRequest = new XMLHttpRequest();
            //2、调用open方法设置请求参数
            xmlHttpRequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=doGet",true);
            //4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作
            xmlHttpRequest.onreadystatechange=function () {
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                     var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                    //把相应的数据显示在页面
                    document.getElementById("div01").innerHTML="id:"+jsonObj.id+" name:"+jsonObj.name;
                }
            }
            //3、调用send方法发送请求
            xmlHttpRequest.send();

        }
    </script>
</head>
<body>
    <button onclick="ajaxRequest()">ajax request</button>
    <div id="div01">

    </div>
</body>
</html>

三、jQuery中的AJAX请求

1、$.ajax方法

ajax方法
url	表示请求的地址
type	表示请求的类型GET或POST请求
data	表示发送给服务器的数据两种格式：一：name=value&name=value 二：{key:value}
success	请求响应，响应的回调函数
dataType	响应的数据类型

<script type="text/javascript">
        $(function () {
            //Ajax请求
            $("#ajaxBtn").click(function () {
                $.ajax({
                    url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
                    data:"action=doGet",
                    type:"GET",
                    success:function (data) {
                           var jsonObj = JSON.parse(data);
                           $("#msg").html("编号："+jsonObj.id+",姓名："+jsonObj.name);
                    },
                    dataType:"text"
                });
            });
        });
    </script>

2、$.get方法和$.post方法

url	请求的url地址
data	发送的数据
callback	成功的回调函数
type	返回的数据类型

//get请求
            $("#getBtn").click(function () {
                $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=doGet",function (data) {
                    $("#msg").html("编号："+data.id+",姓名："+data.name);
                },"json");
            });

            //post请求
            $("#getBtn").click(function () {
                $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=doGet",function (data) {
                    $("#msg").html("编号："+data.id+",姓名："+data.name);
                },"json");
            });

3、$.getJSON方法

url	请求url的地址
data	发送给服务器的数据
callback	成功的回调函数

//JSON请求
            $("#getJSONBtn").click(function () {
                $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=doGet",function (data) {
                    $("#msg").html("编号："+data.id+",姓名："+data.name);
                });
            });

4、表单序列化serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以name=value的形式拼接

//serialize方法
            $("#submit").click(function () {
                alert($("#form01").serialize());
                $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=doGet&"+$("#form01").serialize(),function (data) {
                    $("#msg").html("编号："+data.id+",姓名："+data.name);
                });
            });

i18n国际化

一、含义

同一个网站支持多种不同的语言

二、国际化三要素

 public void test02(){
        //获取我们需要的Locale对象
        Locale locale=Locale.US;
        //通过指定的basename和Locale对象，读取相应的配置文件
        ResourceBundle bundle=ResourceBundle.getBundle("i18n",locale);
        System.out.println(bundle.getString("username"));
        System.out.println(bundle.getString("password"));

    }

三、通过请求头实现国际化

Locale locale=request.getLocal();

四、通过语言类型选择实现国际化

<%
//从请求头中获取Local信息（语言）
Locale locale=null;
String country=request.getParameter("country");
if("cn".equals(country)){
    locale=Locale.CHINA;
}else if("usa".equals(country)){
    locale=Locale.US;
}else{
    locale=request.getLocale();
}
//获取读取包
ResourceBundle i18n=ResourceBundle.getBundle("i18n",locale);

%>
<a href="i18n.jsp?country=cn">中文</a>
<a href="i18n.jsp?country=usa">english</a>

五、使用JSTL标签库fmt实现国际化

<%--1、使用标签设置Locale信息--%>
<fmt:setLocale value="${param.locale}"/>
<%--2、使用标签设置basename--%>
<fmt:setBundle basename="i18n"/>
<%--3、使用标签输出国际化信息--%>
<fmt:message key="username"/>
<a href="i18n_fmt.jsp?locale=zh_CN">中文</a>
<a href="i18n_fmt.jsp?locale=en_US">英文</a>

白开水最甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON、AJAX、i18n

目录JSON一、含义二、JSON在客户端（JavaScript）中的使用三、JSON在服务器（java）中的使用AJAX请求一、含义二、原生AJAX请求三、jQuery中的AJAX请求1、$.ajax方法2、$.get方法和$.post方法3、$.getJSON方法4、表单序列化serialize()i18n国际化一、含义二、国际化三要素三、通过请求头实现国际化四、通过语言类型选择实现国际化五、使用JSTL标签库f...
复制链接

扫一扫

专栏目录