Javaweb——(day12)JSON和Ajax

subeiLY發表於2020-11-28

文章目錄

JSON、AJAX、i18n

JSON、AJAX、i18n

1.什麼是JSON?

JSON(JavaScriptObjectNotation)是一種輕量級的資料交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。JSON採用完全獨立於語言的文字格式，而且很多語言都提供了對json的支援（包括C,C++,C#,Java,JavaScript,Perl,Python等）。這樣就使得JSON成為理想的資料交換格式。

json是一種輕量級的資料交換格式。輕量級指的是跟xml做比較。

資料交換指的是客戶端和伺服器之間業務資料的傳遞格式。

1.1 JSON在JavaScript中的使用

json是由鍵值對組成，並且由花括號（大括號）包圍。每個鍵由引號引起來，鍵和值之間使用冒號進行分隔，多組鍵值對之間進行逗號進行分隔。

<!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">
			// json的定義
			var jsonObj = {
				"key1":12,
				"key2":"adobe",
				"key3":true,
				"key4":[11,"arr",false],
				"key5":{
					"key5_1" : 9527,
					"key5_2" : "key5_2_va"
				},
				"key6":[{
					"key_6_1":"6527",
					"key_6_2":"key_6_2_va"
				},{
					"key_6_1":"6527",
					"key_6_2":"key_6_2_va"
				},{
					"key_6_1":"6527",
					"key_6_2":"key_6_2_va"
				}]
			}

			// json的訪問
			// json物件轉字串
			// json字串轉json物件
		</script>
	</head>
	<body>
		
	</body>
</html>

json的訪問:

json本身是一個物件。
json中的key我們可以理解為是物件中的一個屬性。
json中的key訪問就跟訪問物件的屬性一樣：json物件.key

示例:

<!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">
			// json的定義
			var jsonObj = {
				"key1":12,
				"key2":"adobe",
				"key3":true,
				"key4":[11,"arr",false],
				"key5":{
					"key5_1" : 9527,
					"key5_2" : "key5_2_va"
				},
				"key6":[{
					"key_6_1":"6527",
					"key_6_2":"key_6_2_va"
				},{
					"key_6_1":"6527",
					"key_6_2":"key_6_2_va"
				},{
					"key_6_1":"6527",
					"key_6_2":"key_6_2_va"
				}]
			};
			// json的訪問
			alert(typeof(jsonObj));	// object json就是一個物件
			alert(typeof(jsonObj.key1)); // 12
			alert(typeof(jsonObj.key2)); // adobe
			alert(typeof(jsonObj.key3)); // true
			alert(jsonObj.key4); //得到陣列[11,"arr",false]
			// json中陣列值的遍歷
			for(var i=0;i<jsonObj.key4.length;i++){
				alert(jsonObj.key4[i]);
			}
			alert(typeof(jsonObj.key5));
			alert(jsonObj.key5.key5_1); // 9527
			alert(jsonObj.key5.key5_2); // key5_2_va
			alert(jsonObj.key6); // 得到json陣列
			// 取出來每一個元素都是json物件
			var jsonItem = jsonObj.key6[0];
			// alert(jsonItem.key6_1_1); // 6527
			alert(jsonItem.key6_1_2); // key_6_2_va
			// json物件轉字串
			// json字串轉json物件
		</script>
	</head>
	<body>
		
	</body>
</html>

在這裡插入圖片描述

json的兩個常用方法:

json的存在有兩種形式。
	一種是：物件的形式存在，我們叫它json物件。
	一種是：字串的形式存在，我們叫它json字串。
一般我們要操作json中的資料的時候，需要json物件的格式。
一般我們要在客戶端和伺服器之間進行資料交換的時候，使用json字串。
	JSON.stringify()把json物件轉換成為json字串.
	JSON.parse()把json字串轉換成為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); // adobe

在這裡插入圖片描述

1.2 JSON在java中的使用

匯入jar包，下載地址:https://www.yuque.com/nizhegechouloudetuboshu/library/defyyo

在這裡插入圖片描述

javaBean和json的互轉:

Person.java類

public class Person {
    private Integer id;
    private String name;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Person() {
    }

    public Person(Integer id, String name) {
        this.id = id;
        this.name = name;
    }

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }
}

測試類:

package com.github.json;

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

public class JsonTest {

    // javaBean和json的互轉
    @Test
    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);
    }
}

在這裡插入圖片描述

List和json的互轉:

PersonListType.java

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

import java.util.ArrayList;

public class PersonListType extends TypeToken<ArrayList<Person>> {
}

測試類:

    // 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);
    }

在這裡插入圖片描述

map和json的互轉:

PersonMapType.java

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

import java.util.HashMap;

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

測試類:

    // 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);
    }

在這裡插入圖片描述

2.AJAX請求

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

ajax是一種瀏覽器通過js非同步發起請求，區域性更新頁面的技術。

Ajax請求的區域性更新，瀏覽器位址列不會發生變化.

區域性更新不會捨棄原來頁面的內容.

原生AJAX請求的示例:

BaseServlet.java

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;

public abstract class BaseServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 解決post請求中文亂碼問題
        // 一定要在獲取請求引數之前呼叫才有效
        req.setCharacterEncoding("UTF-8");
        // 解決響應中文亂碼
        resp.setContentType("text/html; charset=UTF-8");
        String action = req.getParameter("action");
        try {
            // 獲取action業務鑑別字串，獲取相應的業務 方法反射物件
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
//            System.out.println(method);
            // 呼叫目標業務 方法
            method.invoke(this, req, resp);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);// 把異常拋給Filter過濾器
        }
    }
}

AjaxServlet.java

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

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

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax請求過來了");
        Person person = new Person(1, "哇哈哈");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // json格式的字串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>com.github.servlet.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>
</web-app>

ajax.html

<!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/12_JSON/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>

在這裡插入圖片描述

ajax.html：

<!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/12_JSON/ajaxServlet?action=javaScriptAjax",true);
// 				4、在send方法前繫結onreadystatechange事件，處理請求完成後的操作。
				xmlhttprequest.onreadystatechange = function(){
					if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
						alert("收到伺服器返回的資料：" + xmlhttprequest.responseText);
						var jsonObj = JSON.parse(xmlhttprequest.responseText);
						// 把響應的資料顯示在頁面上
						document.getElementById("div01").innerHTML = "編號：" + jsonObj.id + " , 姓名：" + jsonObj.name;
					}
				}
// 				3、呼叫send方法傳送請求
				xmlhttprequest.send();

				alert("我是最後一行的程式碼");
			}
		</script>
	</head>
	<body>
<!--	<a href="http://localhost:8080/12_JSON/ajaxServlet?action=javaScriptAjax">非Ajax</a>-->
	<button onclick="ajaxRequest()">ajax request</button>
	<button onclick="ajaxRequest()">ajax request</button>
	<button onclick="ajaxRequest()">ajax request</button>
	<button onclick="ajaxRequest()">ajax request</button>
	<button onclick="ajaxRequest()">ajax request</button>
	<div id="div01">
	</div>
	<table border="1">
		<tr>
			<td>1.1</td>
			<td>1.2</td>
		</tr>
		<tr>
			<td>2.1</td>
			<td>2.2</td>
		</tr>
	</table>
	</body>
</html>

在這裡插入圖片描述

jQuery中的AJAX請求:

$.ajax方法
    url	表示請求的地址
    type	表示請求的型別GET或POST請求
    data	表示傳送給伺服器的資料
    	格式有兩種：
    		一：name=value&name=value
    		二：{key:value}
	success	請求成功，響應的回撥函式
    dataType	響應的資料型別
        常用的資料型別有：
        	text	表示純文字
        	xml		表示xml資料
        	json	表示json物件

AjaxServlet.java:

	protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryAjax == 方法呼叫了");
        Person person = new Person(1, "哇哈哈");
        // json格式的字串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

Jquery_Ajax_request.html

// ajax請求
				$("#ajaxBtn").click(function(){
					$.ajax({
						url:"http://localhost:8080/12_JSON/ajaxServlet",
						// data:"action=jQueryAjax",
						data:{action:"jQueryAjax"},
						type:"GET",
						success:function (data) {
							// alert("伺服器返回的資料是：" + data);
							// var jsonObj = JSON.parse(data);
							$("#msg").html(" ajax 編號：" + data.id + " , 姓名：" + data.name);
						},
						dataType : "json"
					});
				});

在這裡插入圖片描述

$.get方法和$.post方法
   url			請求的url地址
   data		傳送的資料
   callback	成功的回撥函式
   type		返回的資料型別

AjaxServlet.java:

 protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryGet  == 方法呼叫了");
        Person person = new Person(1, "哇哈哈");
        // json格式的字串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

    protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryPost   == 方法呼叫了");
        Person person = new Person(1, "哇哈哈");
        // json格式的字串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

Jquery_Ajax_request.html

// ajax--get請求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/12_JSON/ajaxServlet","action=jQueryGet",function (data) {
						$("#msg").html(" get 編號：" + data.id + " , 姓名：" + data.name);
					},"json");

				});

				// ajax--post請求
				$("#postBtn").click(function(){
					// post請求
					$.post("http://localhost:8080/12_JSON/ajaxServlet","action=jQueryPost",function (data) {
						$("#msg").html(" post 編號：" + data.id + " , 姓名：" + data.name);
					},"json");

				});

在這裡插入圖片描述

$.getJSON方法
    url			請求的url地址
    data		傳送給伺服器的資料
    callback	成功的回撥函式

AjaxServlet.java:

  protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryGetJSON   == 方法呼叫了");
        Person person = new Person(1, "哇哈哈");
        // json格式的字串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

Jquery_Ajax_request.html

// ajax--getJson請求
				$("#getJSONBtn").click(function(){
					$.getJSON("http://localhost:8080/12_JSON/ajaxServlet","action=jQueryGetJSON",function (data) {
						$("#msg").html(" getJSON 編號：" + data.id + " , 姓名：" + data.name);
					});
				});

在這裡插入圖片描述

表單序列化serialize()
    
serialize()可以把表單中所有表單項的內容都獲取到，並以name=value&name=value的形式進行拼接。

AjaxServlet.java:

protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQuerySerialize   == 方法呼叫了");

        System.out.println("使用者名稱：" + req.getParameter("username"));
        System.out.println("密碼：" + req.getParameter("password"));

        Person person = new Person(1, "哇哈哈");
        // json格式的字串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

Jquery_Ajax_request.html

// ajax請求
				$("#submit").click(function(){
					// 把引數序列化
					$.getJSON("http://localhost:8080/12_JSON/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
						$("#msg").html(" Serialize 編號：" + data.id + " , 姓名：" + data.name);
					});
				});

在這裡插入圖片描述

3.i18n國際化

什麼是i18n國際化？

國際化（Internationalization）指的是同一個網站可以支援多種不同的語言，以方便不同國家，不同語種的使用者訪問。
    
關於國際化我們想到的最簡單的方案就是為不同的國家建立不同的網站，比如蘋果公司，他的英文官網是：http://www.apple.com而中國官網是http://www.apple.com/cn

蘋果公司這種方案並不適合全部公司，而我們希望相同的一個網站，而不同人訪問的時候可以根據使用者所在的區域顯示不同的語言文字，而網站的佈局樣式等不發生改變。

於是就有了我們說的國際化，國際化總的來說就是同一個網站不同國家的人來訪問可以顯示出不同的語言。但實際上這種需求並不強烈，一般真的有國際化需求的公司，主流採用的依然是蘋果公司的那種方案，為不同的國家建立不同的頁面。所以國際化的內容我們瞭解一下即可。
    
國際化的英文Internationalization，但是由於拼寫過長，老外想了一個簡單的寫法叫做I18N，代表的是Internationalization這個單詞，以I開頭，以N結尾，而中間是18個字母，所以簡寫為I18N。以後我們說I18N和國際化是一個意思。

國際化相關要素介紹:

在這裡插入圖片描述

國際化資源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=提交

國際化測試程式碼：

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);

//        for (Locale availableLocale : Locale.getAvailableLocales()) {
//            System.out.println(availableLocale);
//        }

        // 獲取中文，中文的常量的Locale物件
        System.out.println(Locale.CHINA);
        // 獲取英文，美國的常量的Locale物件
        System.out.println(Locale.US);

    }

    @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"));
    }

}

在這裡插入圖片描述

通過請求頭國際化頁面:

i18n.jsp

<%@ 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>

通過顯示的選擇語言型別進行國際化:

i18n.jsp

<%@ 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>

在這裡插入圖片描述

JSTL標籤庫實現國際化:

<%--1使用標籤設定Locale資訊--%>
<fmt:setLocalevalue=""/>
<%--2使用標籤設定baseName--%>
<fmt:setBundlebasename=""/>
<%--3輸出指定key的國際化資訊--%>
<fmt:messagekey=""/>

i18n_fmt.jsp

<%@ 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>

在這裡插入圖片描述

javaweb-ajax和json基礎知識
2020-11-07
JavaWebJSON
jQuery入門（五）Ajax和json
2024-08-06
jQueryJSON
JSON&AJAX
2020-11-14
JSON
json，ajax技術
2020-12-29
JSON
ajax接受json響應
2020-04-04
JSON
Ajax&Json筆記
2024-07-13
JSON筆記
ajax解析json物件集合
2022-04-01
JSON物件
Ajax、JSON、響應式設計和Node.js
2024-03-23
JSONNode.js
jQuery、ajax新增Json資料
2018-10-25
jQueryJSON
第88節：Java中的Ajax和ASP.NET和TCP/IP 教程和JSON
2019-02-26
JavaASP.NETTCPJSON
【Javaweb】Cookie和Session
2021-07-27
JavaWebCookieSession
JSON簡介和Ajax簡介--bea這兩篇文章介紹的不錯
2019-04-29
JSON
JavaWeb學習篇10_JQuery初級、高階、Ajax、json簡單學習、校驗使用者名稱是否存在案例、
2020-11-11
JavaWebjQueryJSON
ajax為什麼需要json格式響應資料？
2020-10-23
JSON
day12打卡
2024-08-30
ajax與json通過程式碼的簡單應用
2018-08-31
JSON
vue3.0 載入json的“另類”方法（非ajax）
2020-09-07
VueJSON
axios，Ajax,jQuery ajax,axios和fetch的區別
2018-03-27
iOSjQuery
Day12 檔案操作（1）
2020-11-03
2024/11/21日日誌關於AJAX & Axious非同步框架 & JSON
2024-11-22
非同步框架JSON
jQuery – AJAX get() 和 post() 方法
2022-08-03
jQuery
JSON.parse 和 JSON.stringify 詳解
2021-12-31
JSON
Java中的Json Path和Json Merge Patch
2021-05-13
JavaJSON
走進JavaWeb技術世界1：JavaWeb的由來和基礎知識
2019-10-20
JavaWeb
Ajax,jQuery ajax,axios和fetch介紹、區別以及優缺點
2019-08-22
jQueryiOS
HTTP和AJAX重點知識
2019-04-10
HTTP
AJAX同步和非同步區別
2018-06-03
非同步
ajax和axios、fetch的區別
2018-12-27
iOS
Jquery 和 Ajax的使用方法
2021-09-09
jQuery
javaweb
2024-12-01
JavaWeb
飛機大戰和javaweb商城專案
2020-12-06
JavaWeb
JSON和pickle模組
2024-11-22
JSON
Json Schema簡介和Json Schema的.net實現庫 LateApexEarlySpeed.Json.Schema
2023-12-26
JSON
flutter json_annotation和json_serializable處理json資料序列化
2020-09-30
FlutterJSON
AJAX、$.ajax、axios、fetch、superagent
2019-04-11
iOS
java基礎學習：JavaWeb之request和response
2018-12-16
JavaWeb
java基礎學習：JavaWeb之Cookie和Session
2019-02-27
JavaWebCookieSession
【024期】JavaWeb面試題（五）：Filter和Listener
2021-09-09
JavaWeb面試題Filter

Javaweb——(day12)JSON和Ajax

文章目錄

JSON、AJAX、i18n

1.什麼是JSON?

1.1 JSON在JavaScript中的使用

1.2 JSON在java中的使用

2.AJAX請求

3.i18n國際化

相關文章