526互联

JSON和Aja和请求i18n

发布时间 2023-11-14 22:57:48作者: 一往而深，

JSON

什么是JSON

JSON 在 JavaScript 中的使用

JSON用于客户端和服务器 进行数据交换的格式，客户端和服器都会用到JASON

json就是一个对象，json的一个key理解为他的一个属性

  • json的定义

// json的定义
			var json={
				"key1":5,/*number类型*/
				"key2":"hello",/*字符串类型*/
				"key3":true,/*boolean类型*/
				"key4":[2,"helle",true],/*数组类型*/
				"key5":{/*json类型*/
					"key5_1":"hello",
					"key5_2":true
				},
				"key6":[{/*值是一个数组，数组里面是json对象*/
					"key6_1_1":6611,
					"key6_1_2":"key6_1_2_value"
				},{
					"key6_2_1":6621,
					"key6_2_2":"key6_2_2_value"
				}]
			}
  • JsoN对象的访问(以上面的数据访问)

// json的访问
			//alert(json.key1);//5
			//alert(json.key2);//hello
			//alert(json.key3);//true
			//alert(json.key4);//得到的就是数组[2,helle,true]
			//是一个数组所以我们可以对这个数组进行遍历
			/*for (var i = 0; i < json.key4.length; i++) {
				alert(json.key4[i]);

			}*/
			//alert(json.key5);//[object Object]
			//对json对象中属性的访问
			//alert(json.key5.key5_1);//hello
			//alert(json.key5.key5_2);//true
			//alert(json.key6);//得到对象数组对象数组
			//遍历对象数组(json对象中key不同，不能遍历)
			//alert(json.key6[0].key6_1_1);//第一个对象的第一个值
			//alert(json.key6[0].key6_1_2);//第一个对象的第二个值
			alert(json.key6[1].key6_2_1);
			alert(json.key6[1].key6_2_2);

json在js中两种常见的转换方法

uploading-image-137294.png

  • 举例
var	jsonString = JSON.stringify(json);//将json对象转换为字符串
			alert(jsonString);
			var jsonObject = JSON.parse(jsonString);//将字符串转换为json对象
			alert(jsonObject);

JSON.stringify有点像Java中的toString方法

JSON在java中的使用

在java中要使用json需要先导入jar包，我们导入谷歌提供的

javaBean和json的相互zhuanhua

package com.test;

import com.google.gson.Gson;
import com.pojo.Person;
import org.junit.Test;

public class JsonTest {
    @Test
    public void test1(){
        //创建Gson实例
        Gson gson = new Gson();
        Person person =new Person(2,"张三");
        //将javaBean转换成json(json的字符串表示)
        String personJsonString = gson.toJson(person);
        System.out.println(personJsonString);
        //将json格式转换成javaBean对象
        final Person person1 = gson.fromJson(personJsonString, Person.class);
        System.out.println(person1);
    }
}

List集合和json的相互转换

  • 需要在第二个参数上用Type类型
    最终处理代码=
  • 写一个类继承 TypeToken
package com.json;

import com.google.gson.reflect.TypeToken;
import com.pojo.Person;

import java.util.List;

public class PersonListType extends TypeToken<List<Person>> {
    /*
    上面的泛型类型就是我们将json转化成的具体类型
    List<Person>=ArrayLIst<Person>
    写List和ArrayList都可以
    * */
}


 public void test2(){
      Gson gson = new Gson();
        List<Person>personList= new ArrayList<>();
        personList.add(new Person(1,"张三"));
        personList.add(new Person(2,"李四"));
        //将List类型转化为json格式的字符串
        final String personListJsonString = gson.toJson(personList);
        System.out.println(personListJsonString);//返回一个json数组
        //将json类型转化成List类型
        final List<Person> list = gson.fromJson(personListJsonString,new PersonListType().getType());
        final Person person = list.get(0);
        System.out.println(person);


    }

Map集合和json相互转化

map集合的转换和list集合基本一样

package com.json;

import com.google.gson.reflect.TypeToken;
import com.pojo.Person;

import java.util.Map;

public class PersonMapType extends TypeToken<Map<Integer, Person>> {
}


 @Test
    //Map和json相互转化
    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);
        //将json转化为map集合
      Map<Integer,Person> map = gson.fromJson(personMapJsonString, new PersonMapType().getType());
        System.out.println(map);
        System.out.println(map.get(1));

    }

在我们的程序中可能会有很多json的转换，将会产生很多TypeToken的类，我们需要写很多类，但是他们的作用仅仅是转换。这样太耗费内存了，所以我们可以将他们写成匿名内部类的形式

改进：将List和Map类型的转换写成匿名内部类的形式

AJAX

什么是 AJAX 请求

原生 AJAX 请求的示例

可以在w3school中查看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">
			//发起ajax请求的步骤·
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest 
				var xmlhttprequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
				//参数三：是否异步
				xmlhttprequest.open("GET","http://localhost:8080/json_ajax/ajaxServlet?action=javaScrapAjax",true);

// 				3、调用send方法发送请求
				xmlhttprequest.send();
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlhttprequest.onreadystatechange=function(){
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
					//	document.getElementById("div01").innerHTML=xmlhttprequest.responseText(直接展示json字符串对用户不友好)
						//将json格式字符串转化为json对象
						var personJsonObj = JSON.parse(xmlhttprequest.responseText);//转化成json对象
						document.getElementById("div01").innerHTML = "编号：" + personJsonObj.id + " 姓名:" + personJsonObj.name;
					}
				}
			}
		</script>
	</head>
	<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
			
			
		</div>
	</body>
</html>
  • servlet：处理请求，并返回数据(以json的格式)
package com.servlet;

import com.google.gson.Gson;
import com.pojo.Person;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

//用于处理ajax请求
public class AjaxServlet extends BaseServlet{

    //处理ajax请求
    protected void javaScrapAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        System.out.println("接收到了ajax请求");
        //向客户端=回传数据
        Person person = new Person(1,"张三");
        //我们使用使用json的格式回传数据
        Gson gson = new Gson();
        final String personStringJson = gson.toJson(person);
        //将回传的person对象以json的格式回传给客户端
        resp.getWriter().write(personStringJson);

    }
}
  • 输出结果

    注意：

AJAX请求特点说明

  • 1.页面局部更新




异步请求好处说明


jquery的AJAX请求

在我们的实际开发中不会自己写ajax请求的，而是使用JS框架来实现ajax请求

  • $.ajax()方法

  • 可以参考jquery文档

  • 服务器servelt中的方法

//处理ajax请求
    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, InterruptedException {
        resp.setContentType("text/html;charset=utf-8");
        System.out.println("调用了jQqeryAjax方法");
        //向客户端=回传数据
        Person person = new Person(1,"张三");

        //我们使用使用json的格式回传数据
        Gson gson = new Gson();
        final String personStringJson = gson.toJson(person);
        //将回传的person对象以json的格式回传给客户端
        resp.getWriter().write(personStringJson);

    }

前端代码:在页面中有一个id=mag的div标签

	$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
				$.ajax({
				url:"http://localhost:8080//json_ajax/ajaxServlet",   //请求地址
				type:"GET",  //请求类型
				data:"action=jQueryAjax",	//请求的数据（附加在url后面）
			success:function (data){//请求成功，响应的回调函数(data表示服务器响应的数据)
				$("#mag").html("编号:"+data.id + " 姓名:" + data.name);//将得到的数据写到页面中
			},
			dataType:"json"//响应的数据类型

				});

\(.get 方法和\).post 方法

GET和post方法和ajax相比少了一个type(请求参数)，因为GET和post方法本身就决定了是那种请求

  • 前端代码
// ajax--get请求
				$("#getBtn").click(function(){
					$.get("http://localhost:8080//json_ajax/ajaxServlet","action=jQueryGET",function (data) {
						//将data格式字符串转化成对象
						var data = JSON.parse(data);//转化成json对象
						$("#mag").html("get编号:"+data.id + " 姓名:" + data.name);//将得到的数据写到页面中

					}),"json"




					
				});
				
				// ajax--post请求
				// ajax--get请求
				$("#postBtn").click(function(){
					$.get("http://localhost:8080//json_ajax/ajaxServlet","action=jQueryPOST",function (data) {
						//将data格式字符串转化成对象
						var data = JSON.parse(data);//转化成json对象
						$("#mag").html("post编号:"+data.id + " 姓名:" + data.name);//将得到的数据写到页面中

					}),"json"
  • servlet代码
 //处理ajax请求
    protected void jQueryGET(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, InterruptedException {
        resp.setContentType("text/html;charset=utf-8");
        System.out.println("调用了jQueryGET方法");
        //向客户端=回传数据
        Person person = new Person(1,"张三");

        //我们使用使用json的格式回传数据
        Gson gson = new Gson();
        final String personStringJson = gson.toJson(person);
        //将回传的person对象以json的格式回传给客户端
        resp.getWriter().write(personStringJson);

    }
    protected void jQueryPOST(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, InterruptedException {
        resp.setContentType("text/html;charset=utf-8");
        System.out.println("调用了jQueryPOST方法");
        //向客户端=回传数据
        Person person = new Person(1,"张三");

        //我们使用使用json的格式回传数据
        Gson gson = new Gson();
        final String personStringJson = gson.toJson(person);
        //将回传的person对象以json的格式回传给客户端
        resp.getWriter().write(personStringJson);

    }

getJson方法

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

表单序列化 serialize()方法

  • 需求



此时进行提交表单的时候页面不会进行跳转，并且页面可以进行局部更新
问题：不知道是不是现版本的jquery和idea不兼容，好像不支持getQuery方法，好像存在页面无法更新的情况

i18n国际化

什么是国际化

国际化三要素

国际化基础示例

  • 中文配置文件
  • 英文配置文件
package com.atguigu.i18n;

import org.junit.Test;

import java.util.Locale;
import java.util.ResourceBundle;


public class I18nTest {
    @Test
    public void TestLocale(){
        //获取默认时区位置信息
        Locale locale = Locale.getDefault();
        System.out.println(locale);
        //获取locale对象常量
        Locale locale1 = Locale.CHINA;
        System.out.println(locale1);//zh_CN

    }
    @Test
    public void testI18n(){//（国际化基础）
        Locale locale = Locale.US;//位置为美国，英文
        ResourceBundle resourceBundle = ResourceBundle.getBundle("i18n",locale);//获取对应的英文配置文件
        final String username = resourceBundle.getString("username");
        final String password = resourceBundle.getString("password");
        System.out.println("username="+username);//username=username
        System.out.println("password="+password);//     password=password
    }
}

通过请求头实现国际化

  • 可以在浏览器中修改语言的顺序

    浏览器优先支持的语言可以在设置中进行修改
  • 此时我们浏览器优先支持英文
<%@ 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>
		<h1>注册</h1>
		<table>
		<form>
			<tr>
				<td><%=i18n.getString("username")%></td>
				<td>用户名</td>
				<td><<input name="username" type="text" /></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><%=i18n.getString("password")%></td>
				<td><input type="password" /></td>
			</tr>
			<tr>
				<td><%=i18n.getString("sex")%></td>
				<td>性别</td>
				<td><input type="radio" />男<input type="radio" />女</td>
			</tr>
			<tr>
				<td><%=i18n.getString("email")%></td>
				<td>邮箱</td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<td><%=i18n.getString("reset")%></td>
				<input type="reset" value="重置" />&nbsp;&nbsp;
				<td><%=i18n.getString("submit")%></td>
				<input type="submit" value="提交" /></td>
			</tr>
			</form>
		</table>
		<br /> <br /> <br /> <br />
	</center>
	国际化测试：
	<br /> 1、访问页面，通过浏览器设置，请求头信息确定国际化语言。
	<br /> 2、通过左上角，手动切换语言
</body>
</html>
  • 语言配置文件


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

有些用户不会在设置中修改优先支持的语言，

JSTL 标签库实现国际化

在开发的时候我们希望使用EL表达式和JSTL替代掉代码脚本和表达式脚本

  • 使用上面写好的属性文件
  • 思路和前面完全一样
<%@ 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" />" />&nbsp;&nbsp;
<input type="submit" value="<fmt:message key="submit" />" /></td>
</tr>
</form>
</table>
<br /> <br /> <br /> <br />
</center>
</body>
</html>