1、json的定义

由键值对组成，由花括号包围，键用引号引起，与值用冒号隔开，多组键值对利用逗号隔开。

注：键是字符串，但是值可以有多种类型，有数值型、字符串、布尔型、数组、json，且数组中可以套再套json。

jspjsonajaxJSONAJAXI18N Webpack

let student = {

"name": "lls",

"age": 18,

"isMarry": false,

"parentName": ["root", "root"],

"parent": [{

"name": "root",

"age": 50

}, {

"name": "root",

"age": 51,

"isWoman": false

}]

}

2、json的访问

json为一个普通的工具，key就相称于属性，可以通过打点+属性去获取value。

// json的访问

console.log(student.name)

console.log(student.age)

console.log(student.isMarry)

console.log(student.parent[0].name)

console.log(student.parent[0].age)

console.log(student.parent[1].name)

console.log(student.parent[1].age)

console.log(student.parent[1].isWoman)

3、json的转换

json以工具或者字符串的形式存在，两者之间可以相互转换。

操作数据时，须要json的工具模式；而数据交流时须要json的字符串模式。

// json工具转字符串

console.log(student)

let studentStr = JSON.stringify(student)

console.log(studentStr)

// json字符串转json工具

let studentJson = JSON.parse(studentStr)

console.log(studentJson)

4、json在Java中利用

java中json的常见转换目标，JavaBean、List、Map。
须要干系解析json的jar包，这里利用Google的gson.jar。

A.JavaBean

/

JavaBean转Json

/

@Test

public void test1() {

Person p = new Person("root", 18, false, new String[]{"root", "root"},

new Person[]{new Person("root", 50, true, null, null),

new Person("root", 51, true, null, null)});

//创建Gson工具

Gson gson = new Gson();

//将JavaBean转换为json的字符串模式。

String s = gson.toJson(p);

System.out.println(s);

//输出

//{"name":"root","age":18,"isMarry":false,"parentName":["root","root"],

// "parent":[{"name":"root","age":50,"isMarry":true},{"name":"root","age":50,"isMarry":true}]}

//将json的字符串模式转换为JavaBean

Person person = gson.fromJson(s, Person.class);

System.out.println(person);

//输出

//Person{name='root', age=18, isMarry=false, parentName=[root, root],

// parent=[Person{name='root', age=50, isMarry=true, parentName=[null, null], parent=[null, null]},

// Person{name='root', age=51, isMarry=true, parentName=[null, null], parent=[null, null]}]}

}

B.List

/

Json 与 List

/

@Test

public void test2() {

Person p1 = new Person("root1", 18, false, null, null);

Person p2 = new Person("root2", 19, false, null, null);

List&lt;Person> pList = new ArrayList<>();

pList.add(p1);

pList.add(p2);

//创建Gson工具

Gson gson = new Gson();

//将list转换为json字符串模式

String s = gson.toJson(pList);

System.out.println(s);

//输出

//[{"name":"root1","age":18,"isMarry":false},{"name":"root2","age":19,"isMarry":false}]

//将json字符串模式转换为List类型

Type type = new PersonListType().getType();

List<Person> personList = (List<Person>)gson.fromJson(s, type);

personList.forEach(System.out::println);

}

package com.xhu.pojo;

import com.google.gson.reflect.TypeToken;

import java.util.List;

public class PersonListType extends TypeToken<List<Person>> {

}

C.Map

/

Map 与json的转换

/

@Test

public void test3() {

Map<Integer, Person> m = new HashMap<>();

for (int i = 0; i < 10; i++) {

Person person = new Person();

person.setName(String.valueOf(i));

m.put(i, person);

}

//创建Gson工具

Gson gson = new Gson();

//Map 转json的字符串模式

String s = gson.toJson(m);

System.out.println(s);

//json字符串模式转Map

Map<Integer, Person> map = gson.fromJson(s, new TypeToken<Map<Integer, Person>>() {

}.getType());

map.values().forEach(System.out::println);

}

二、AJAX

AJAX（Asynchronous JavaScript And XML），XML是一种传输数据的一个格式，现在普遍用JSON。

浸染）用js异步发送要求，局部更新数据。

<script type="text/javascript">

function ajaxRequest() {

// 1、我们首先要创建XMLHttpRequest

let xhr = new XMLHttpRequest()

// 2、调用open方法设置要求参数,true表示异步，false表示必须同步实行下面的代码，即必须相应回来了才能实行下面的代码。

xhr.open("get", "http://www.baidu.com", true);

// 3、在send方法前绑定onreadystatechange事宜，处理要求完成后的操作。

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

let object = JSON.parse(xhr.responseText)

console.log(object);

document.getElementById("#name").value = object.name

document.getElementById("#password").value = object.password

}

}

// 4、调用send方法发送要求

xhr.send()

}

</script>

注：可以参考官方API文档，做到知其然，还知其以是然。

注：也可以参考Jquery的get、post、getJson。

JQuery 中的 Ajax 要求，

$.ajax 方法 url type data success dataType

$.get 方法和$.post 方法 url data callback type

$.getJSON 方法 url data callback

表单序列化 serialize()，将form表单中的name和value转换成name1=value1&name2=value2&…name=value的形式。

三、I18N

1、Core

可选择网页的展现措辞，不改变样式，只改变内容。

Core在于，工具类ResourceBundle来关联当地信息Locale和不同措辞配置文件，然后根据不同的Locale信息读相应的配置文件信息。

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

i18n_zh_CN.properties，

username=用户名

password=密码

sex=性别

age=年事

regist=注册

boy=男

girl=女

email=邮箱

reset=重置

submit=提交

3、Java实现

@Test

public void testI18n(){

// 得到我们须要的 Locale 工具

Locale locale = Locale.CHINA;

// 通过指定的 basename 和 Locale 工具，读取 相应的配置文件

ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);

System.out.println("username：" + bundle.getString("username"));

System.out.println("password：" + bundle.getString("password"));

System.out.println("Sex：" + bundle.getString("sex"));

System.out.println("age：" + bundle.getString("age"));

}

}

4、JSTL的fmt替代Java的配置和输出

<%--1 利用标签设置 Locale 信息--%>

<fmt:setLocale value="" />

<%--2 利用标签设置 baseName--%>

<fmt:setBundle basename=""/>

<%--3 输出指定 key 的国际化信息--%>

<fmt:message key="" />

5、Case

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ 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> <%--1 利用标签设置 Locale 信息--%>

<fmt:setLocale value="${param.locale}"/>

<%--2 利用标签设置 baseName--%>

<fmt:setBundle basename="i18n"/>

<a href="i18n_fmt.jsp?locale=zh_CN">中文</a>| <a href="i18n_fmt.jsp?locale=en_US">english</a>

<center>

<h1><fmt:message key="regist"/></h1>

<table>

<form>

<tr>

<td><fmt:message key="username"/></td>

<td><input name="username" type="text"/></td>

</tr>

<tr>

<td><fmt:message key="password"/></td>

<td><input type="password"/></td>

</tr>

<tr>

<td><fmt:message key="sex"/></td>

<td><input type="radio"/><fmt:message key="boy"/>

<input type="radio"/><fmt:message key="girl"/>

</td>

</tr>

<tr>

<td><fmt:message key="email"/></td>

<td><input type="text"/></td>

</tr>

<tr>

<td colspan="2" align="center">

<input type="reset" value="<fmt:message key="reset" />"/>

<input type="submit" value="<fmt:message key="submit" />"/></td>

</tr>

</form>

</table>

<br/> <br/> <br/> <br/></center>

</body>

</html>

总结

1）JSON

2）AJAX

3）I18N