Javaweb之AJAX%JSON&I18n

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

同学郑学习

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

阅读量125

点赞数

分类专栏： # JavaWeb目录文章标签： Javaweb i18n ajax json

本文链接：https://blog.csdn.net/weixin_46635575/article/details/123798546

版权

JavaWeb目录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

之前已经学习了javaweb的相关内容，接下来学习Javaweb的JSON和AJAX，也是Javaweb的最后一篇文章，有相关需求的可以在我主页查看，Javaweb目录。本文学习视频资源：资源地址

一、JSON

1、什么是JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python等）。这样就使得 JSON 成为理想的数据交换格式。

json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。
它是由键值对组成，并且由花括号包裹，键和值之间用冒号进行风格，多个键值对用逗号进行分割。

2、定义如下

键值对可以是键值对，可以是键和数组[]，可以是键和对象{这个里面有}，键和对象类型的数组。

var jsonObj = {
"key1":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
	"key5_1" : 551,
	"key5_2" : "key5_2_value"
},
"key6":[{
	"key6_1_1":6611,
	"key6_1_2":"key6_1_2_value"
	},{
	"key6_2_1":6621,
	"key6_2_2":"key6_2_2_value"
	}]
};

3、JSON的访问

JSON本身是一个对象
JSON中的key我们可以理解为对象中的一个属性
JSON中的key访问就跟访问对象的属性一样：JSON对象.key

alert(typeof(jsonObj));// object json 就是一个对象
alert(jsonObj.key1); //12
alert(jsonObj.key2); // abc
alert(jsonObj.key3); // true
alert(jsonObj.key4);// 得到数组[11,"arr",false]
// json 中 数组值的遍历
for(var i = 0; i < jsonObj.key4.length; i++) {
	alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5_2_value
alert( jsonObj.key6 );// 得到 json 数组
// 取出来每一个元素都是 json 对象
var jsonItem = jsonObj.key6[0];
// alert( jsonItem.key6_1_1 ); //6611
alert( jsonItem.key6_1_2 ); //key6_1_2_value

4、JSON常用两个方法

JSON的存在有两种形式

一种是以对象的形式存在，我们叫他JSON对象
另外一种是字符串的形式存在，叫做JSON字符串
一般我们要操作JSON中的数据的时候，需要JSON对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候，使用JSON字符串
- 把JSON对象转化为JSON字符串：JSON.stringify()
- 把JSON字符串转化JSON对象：JSON.parse()

// 把 json 对象转换成为 json 字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java 中对象的 toString
alert(jsonObjString)
// 把 json 字符串。转换成为 json 对象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc

5、java中使用JSON

（1）javaBean和JSON的互转

public void test1(){
	Person person = new Person(1,"国哥好帅!");
	// 创建 Gson 对象实例
	Gson gson = new Gson();
	// toJson 方法可以把 java 对象转换成为 json 字符串
	String personJsonString = gson.toJson(person);
	System.out.println(personJsonString);
	// fromJson 把 json 字符串转换回 Java 对象
	// 第一个参数是 json 字符串
	// 第二个参数是转换回去的 Java 对象类型
	Person person1 = gson.fromJson(personJsonString, 	Person.class);
	System.out.println(person1);
}

（2）list和JSON的转化

@Test
public void test2() {
	List<Person> personList = new ArrayList<>();
	personList.add(new Person(1, "国哥"));
	personList.add(new Person(2, "康师傅"));
	Gson gson = new Gson();
	// 把 List 转换为 json 字符串
	String personListJsonString = gson.toJson(personList);
	System.out.println(personListJsonString);
	List<Person> list = gson.fromJson(personListJsonString, 	new PersonListType().getType());
	System.out.println(list);
	Person person = list.get(0);
	System.out.println(person);
}

（3）map和JSON的互转

@Test
public void test3(){
	Map<Integer,Person> personMap = new HashMap<>();
	personMap.put(1, new Person(1, "国哥好帅"));
	personMap.put(2, new Person(2, "康师傅也好帅"));
	Gson gson = new Gson();
	// 把 map 集合转换成为 json 字符串
	String personMapJsonString = gson.toJson(personMap);
	System.out.println(personMapJsonString);
	// Map<Integer,Person> personMap2 = 	gson.fromJson(personMapJsonString, new
	PersonMapType().getType());
	Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
	TypeToken<HashMap<Integer,Person>>(){}.getType());
	System.out.println(personMap2);
	Person p = personMap2.get(1);
	System.out.println(p);
}

二、AJAX

1、什么是AJAX

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发
技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

不用刷新整个页面。

2、原生的AJAX

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        // 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
        function ajaxRequest() {
// 1、我们首先要创建 XMLHttpRequest
            var xmlhttprequest = new XMLHttpRequest();
// 2、调用 open 方法设置请求参数
            xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)
// 4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
            xmlhttprequest.onreadystatechange = function(){
                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                    var jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
                    document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" +
                        jsonObj.name;
                }
            }
// 3、调用 send 方法发送请求
            xmlhttprequest.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

3、jQuery里面使用AJAX

第一部分方法
第二部分方法

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

第三部分

在这里插入图片描述

三、i18n

随便了解一下就OK了，因为公司真的涉及到了国际化的时候，还是采用的苹果公司的格式，给不同的国家不同的开发。

1、i18n介绍

 国际化（Internationalization）指的是同一个网站可以支持多种不同的语言，以方便不同国家，不同语种的用户访问。
 关于国际化我们想到的最简单的方案就是为不同的国家创建不同的网站，比如苹果公司，他的英文官网是：
http://www.apple.com 而中国官网是 http://www.apple.com/cn
 苹果公司这种方案并不适合全部公司，而我们希望相同的一个网站，而不同人访问的时候可以根据用户所在的区域显示
不同的语言文字，而网站的布局样式等不发生改变。
 于是就有了我们说的国际化，国际化总的来说就是同一个网站不同国家的人来访问可以显示出不同的语言。但实际上这
种需求并不强烈，一般真的有国际化需求的公司，主流采用的依然是苹果公司的那种方案，为不同的国家创建不同的页
面。所以国际化的内容我们了解一下即可。
 国际化的英文 Internationalization，但是由于拼写过长，老外想了一个简单的写法叫做 I18N，代表的是 Internationalization
这个单词，以 I 开头，以 N 结尾，而中间是 18 个字母，所以简写为 I18N。以后我们说 I18N 和国际化是一个意

在这里插入图片描述

2、配置国际化

创建英文的properties文件：i18n_en_US.properties

username=username
password=password
sex=sex
age=age
regist=regist
boy=boy
email=email
girl=girl
reset=reset
submit=submit

配置中文的properties文件：i18n_zh_CN.properties

username=用户名
password=密码
sex=性别
age=年龄
regist=注册
boy=男
girl=女
email=邮箱
reset=重置
submit=提交

国际化测试

// 获取中文，中文的常量的 Locale 对象
System.out.println(Locale.CHINA);
// 获取英文，美国的常量的 Locale 对象
System.out.println(Locale.US);

3、练习

<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
</head>
<body>
<%
// 从请求头中获取 Locale 信息（语言）
Locale locale = request.getLocale();
System.out.println(locale);
// 获取读取包（根据 指定的 baseName 和 Locale 读取 语言信息）
ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<a href="">中文</a>|
<a href="">english</a>
<center>
    <h1><%=i18n.getString("regist")%></h1>
    <table>
        <form>
            <tr>
                <td><%=i18n.getString("username")%></td>
                <td><input name="username" type="text" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("password")%></td>
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("sex")%></td>
                <td>
                    <input type="radio" /><%=i18n.getString("boy")%>
                    <input type="radio" /><%=i18n.getString("girl")%>
                </td>
            </tr>
            <tr>
                <td><%=i18n.getString("email")%></td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="reset" value="<%=i18n.getString("reset")%>" />&nbsp;&nbsp;
                    <input type="submit" value="<%=i18n.getString("submit")%>" /></td>
            </tr>
        </form>
    </table>
    <br /> <br /> <br /> <br />
</center>
国际化测试：
<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
<br /> 2、通过左上角，手动切换语言
</body>
</html>

<%@ page import="java.util.Locale" %>
<%@ page import="java.util.ResourceBundle" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
</head>
<body>
<%
// 从请求头中获取 Locale 信息（语言）
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();
}
System.out.println(locale);
// 获取读取包（根据 指定的 baseName 和 Locale 读取 语言信息）
ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<a href="i18n.jsp?country=cn">中文</a>|
<a href="i18n.jsp?country=usa">english</a>
<center>
    <h1><%=i18n.getString("regist")%></h1>
    <table>
        <form>
            <tr>
                <td><%=i18n.getString("username")%></td>
                <td><input name="username" type="text" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("password")%></td>
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("sex")%></td>
                <td>
                    <input type="radio" /><%=i18n.getString("boy")%>
                    <input type="radio" /><%=i18n.getString("girl")%>
                </td>
            </tr>
            <tr>
                <td><%=i18n.getString("email")%></td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="reset" value="<%=i18n.getString("reset")%>" />&nbsp;&nbsp;
                    <input type="submit" value="<%=i18n.getString("submit")%>" /></td>
            </tr>
        </form>
    </table>
    <br /> <br /> <br /> <br />
</center>
国际化测试：
<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
<br /> 2、通过左上角，手动切换语言
</body>
</html>

同学郑学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javaweb之AJAX%JSON&I18n

一、ThreadLocal1、ThreadLocal的使用ThreadLocal的作用，它可以解决多线程的数据安全问题ThreadLocal可以给当前线程关联一个数据（可以是普通变量，可以是对象，可以是数组，集合）2、特点ThreadLocal可以为当前线程关联一个数据（可以像map一样存数据，key为当前线程）每一个ThreadLocal对象，只能为当前线程关联一个数据，如果当前线程关联多个数据，就需要使用多个ThreadLocal对象每个ThreadLocal对象实例定义的嘶吼，一般
复制链接

扫一扫