JavaWeb笔记(9)：JSON/Ajax/i18n-6ren

JavaWeb笔记(9)：JSON/Ajax/i18n

转载作者：知者更新时间：2024-03-13 09:13:46

1、JSON

2、JSON 在 JavaScript 中的使用

3、JSON 在 java 中的使用（使用的是谷歌的Gson ）

4、AJAX 请求

1、什么是 AJAX 请求

2、原生 AJAX 请求的示例

3、jQuery 中的 AJAX 请求

1、JSON

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

json 是一种轻量级的数据交换格式，轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。

2、JSON 在 JavaScript 中的使用

①、json 的定义

json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间进行逗号进行分隔。
json 定义示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var json = {
       var jsonObj = {
	    "key1": 12,
	    "key2": "abc",
	    "key3": true,
	    "key4": [11, "arr", false],
	    "key5": {
	    	"key5_1": 551,
	    	"key5_2": "key5_2_value"
	    },                                       //json对象
	    "key6": [{                               //json对象数组
	    	"key6_1_1": 6611,
	    	"key6_1_2": "key6_1_2_value"
	    },{
	    	"key6_2_1": 6621,
	    	"key6_2_2": "key6_2_2_value"
	    }] 
};

    </script>
</head>
<body>

</body>
</html>

②、json 的访问

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
          
        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 

    </script>
</head>
<body>

</body>
</html>

③、json 的常用两个方法

json 的存在有两种形式。
一种是：对象的形式存在，我们叫它 json 对象。
一种是：字符串的形式存在，我们叫它 json 字符串。
一般我们要操作 json 中的数据的时候，需要 json 对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。
JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 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);// abc

3、JSON 在 java 中的使用（使用的是谷歌的Gson ）

Gson包的下载

①、javaBean 和和 json 的互转

@Test
public void test1(){
    Person person = new Person(1," Tommey周");
    // 创建 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 互

@Test
public void test2() {
    List<Person> personList = new ArrayList<>();
    personList.add(new Person(1, " Tommey"));
    personList.add(new Person(2, " Tommey周"));
    Gson gson = new Gson();
    // 把 List 转换为 json 字符串
    String personListJsonString = gson.toJson(personList);
    System.out.println("list ==> json :"+personListJsonString);
    List<Person> list = gson.fromJson(personListJsonString, new TypeToken<List<Person>>() {}.getType());
    System.out.println("json ==> list :"+ list);
}

③、map 和 json 的互转

@Test
public void test3(){
    Map<Integer,Person> personMap = new HashMap<>();
    personMap.put(1, new Person(1, " Tommey"));
    personMap.put(2, new Person(2, " Tommey周"));
    Gson gson = new Gson();
    // 把 map 集合转换成为 json 字符串
    String personMapJsonString = gson.toJson(personMap);
    System.out.println("map ====》 json" + personMapJsonString);
    Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());
    System.out.println("json ====》 map" + personMap2);
}

4、AJAX 请求

1、什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发
技术。
ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

2、原生 AJAX 请求的示例

ajax.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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/ServletTest/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.age + " ,  姓名：" +
                        jsonObj.name;
                }
            }
            // 3 、调用 send 方法发送请求
            xmlhttprequest.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01"></div>
</body>
</html>

servlet类：

public class AjaxServlet extends BaseServlet {

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

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

3、jQuery 中的 AJAX 请求

$.ajax 方法
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种：
①：name=value&name=value
②：{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型，常用的数据类型有：text 表示纯文本，xml 表示 xml 数据，json 表示 json 对象

html页面代码：

<body>
<button id="ajaxBtn">ajax request</button>
<div id="msg"></div>

<script>
    $("#ajaxBtn").click(function(){
        $.ajax({
            url:"http://localhost:8080/ServletTest/ajaxServlet",
            // data:"action=jQueryAjax",
            data:{action:"jQueryAjax"},
            type:"GET",
            success:function (data) {
                // alert(" 服务器返回的数据是： " + data);
                // var jsonObj = JSON.parse(data);
                $("#msg").html(" 年龄：" + data.age + " ,  姓名：" + data.name);
            },
            dataType : "json"
        });
    });
</script>
</body>

$.get 方法和 $.post 方法

url 请求的 url 地址

data 发送的数据

callback 成功的回调函数

type 返回的数据类型

html页面代码：

<script>
    // ajax--get 请求
    $("#getBtn").click(function(){
        $.get("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryGet",function (data) {
            $("#msg").html(" get  年龄：" + data.age + " ,  姓名：" + data.name);
        },"json");
    });
    // ajax--post 请求
    $("#postBtn").click(function(){
        $.post("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryPost",function (data)
        {
            $("#msg").html(" post  年龄：" + data.age + " ,  姓名：" + data.name);
        },"json");
    });
</script>

$.getJSON 方法

url 请求的 url 地址

data 发送给服务器的数据

callback 成功的回调函数

html页面代码：

<script>
    // ajax--getJson 请求
    $("#getJSONBtn").click(function(){
        $.getJSON("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryGetJSON",function
            (data) {
            $("#msg").html(" getJSON  年龄：" + data.age + " ,  姓名：" + data.name);
        });
    });
</script>

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

<body>
<form id="form01" >
    用户名：<input name="username" type="text" /><br/>
    密码：<input name="password" type="password" /><br/>
</form>
<button id="submit">提交--serialize()</button>
<div id="msg"></div>
<script>
    // ajax 请求
    $("#submit").click(function(){
        // 把参数序列化
        $.getJSON("http://localhost:8080/ServletTest/ajaxServlet","action=jQuerySerialize&" +
            $("#form01").serialize(),function (data) {
            $("#msg").html(" Serialize  年龄：" + data.age + " ,  姓名：" + data.name);
        });
    });
</script>
</body>

Ajax使用案例

使用 AJAX 验证用户名是否可用
regist.jsp 页面中的代码：

$("#username").blur(function () {
	//1 获取用户名
	var username = this.value;
	$.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username=" +
username,function (data) {
		if (data.existsUsername) {
			$("span.errorMsg").text(" 用户名已存在！");
		} else {
			$("span.errorMsg").text(" 用户名可用！");
		}
	});
});

servlet类：

protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
	// 获取请求的参数 username
	String username = req.getParameter("username");
	// 调用 userService.existsUsername();
	boolean existsUsername = userService.existsUsername(username);
	// 把返回的结果封装成为 map 对象
	Map<String,Object> resultMap = new HashMap<>();
	resultMap.put("existsUsername",existsUsername);
	Gson gson = new Gson();
	String json = gson.toJson(resultMap);
	resp.getWriter().write(json);
}

参考：（14）JSON 、AJAX 和i18n的使用_Tommey01的博客-CSDN博客

文章推荐： SpringBoot：使用Jackson完成全局序列化配置

文章推荐：阿里云Quick BI学习之报表制作

文章推荐： Java 之 Java Web【Java面试题】

文章推荐： java中各种类型用Stream流求和

OkHttp的作用_为什么要使用OkHttp？(笔记)
OkHttp的作用 OkHttp is an HTTP client。如果是HTTP的方式想得到数据，就需要我们在页面上输入网址，如果网址没有问题，就有可能返回对应的String字符串，如果这个地址
笔记：KMP的复习
Record 一个重要的字符串算法，这是第三次复习。通过总结我认为之所以某个算法总是忘记，是因为大脑始终没有认可这种算法的逻辑（也就是脑回路）。本篇主要讲解从KMP的应用场景，
SQL注入学习手册【笔记】
SQL 注入基础【若本文有问题请指正】有回显回显正常基本步骤 1. 判断注入类型数字型 or 字符型数字型【示例】：
【笔记】跟吴恩达和IsaFulford学提示词工程（初级开发者入门课程）
标签： #Prompt #LLM 创建时间：2023-04-28 17:05:45 链接：课程（含JupyterNotebook），中文版讲师： An
swift学习文档(笔记)
Swift是供iOS和OS X应用编程的新编程语言，基于C和Objective-C，而却没有C的一些兼容约束。Swift采用了安全的编程模式和添加现代的功能来是的编程更加简单、灵活和有趣。界面则基于
红日靶机(七)笔记
VulnStack-红日靶机七概述在 VulnStack7 是由 5 台目标机器组成的三层网络环境，分别为 DMZ 区、第二层网络、第三层网络。涉及到的知识点也是有很多，redis未授权的利用
红日靶机(一)笔记
红日靶机(一)笔记概述域渗透靶机，可以练习对域渗透的一些知识，主要还是要熟悉 powershell 语法，powershell 往往比 cmd 的命令行更加强大，而很多渗透开源的脚本都是 po
项目管理之八大绩效域-------笔记(二)
八大绩效域详细解析 18.1 干系人绩效域跟干系人所有相关的活动. 一、预期目标 ①与干系人建立高效的工作关系 ②干系人认同项目目标 ③支持项目的干系人提高
项目管理之八大绩效域------笔记(三)
18.3 开发方法和生命周期绩效域跟开发方法,项目交付节奏和生命周期相关的活动和职能. 一、预期目标: ①开发方法与项目可交付物相符合； ②将项目交付与干系人价值紧密
项目管理之八大绩效域------笔记(五)
18.7 度量绩效域度量绩效域涉及评估项目绩效和采取应对措施相关的活动和职能度量是评估项目绩效，并采取适当的应对措施，以保持最佳项目绩效的过程。一、预期目标: ①对项目状况
pygraphviz 安装笔记
pygraphviz 安装，windows系统：正确的安装姿势： Prebuilt-Binaries/PyGraphviz at master · CristiFati/Prebuilt-Binar
SpringBoot配置热加载工具(devtools)笔记
今天给大家介绍IDEA开发工具如何配置devtools热加载工具。 1、devtools原理介绍 spring-boot-devtools是spring为开发者提供的热加载
JavaScript 正则表达式(笔记)
一什么是正则表达式 // 正则表达式(regular expression)是一个描述字符模式的对象; // JS定义RegExp类表示正则表达式; // String和RegExp都定义了使用
C++笔记-Centos7搭建OpenCV3.4开发环境
目前是2022-04-25 23:48:03，此篇博文分享到互联网上估计是1-2个月后的事了，此时的OpenCV3最新版是3.4.16 这里前提是gcc，g++，cmake都需要安装好。没安装好的，
01、Flink 笔记 - 概述和入门案例
一、概述 1、Flink 是什么 Apache Flink is a framework and distributed processing engine for stateful comput
10、Flink 笔记 - window窗口（一）
一、window 概述 Flink 通常处理流式、无限数据集的计算引擎，窗口是一种把无限流式数据集切割成有限的数据集进行计算。window窗口在Flink中极其重要。二、window 类型 w
11、Flink 笔记 - window窗口（二）
一、触发器（Trigger） 1.1、案例一利用global window + trigger 计算单词出现三次统计一次（有点像CountWindow）某台虚拟机或者mac 终端输入：nc -
12、Flink 笔记 - 时间语义和watermark
一、时间语义在Flink 中涉及到三个重要时间概念：EventTime、IngestionTime、ProcessingTime。 1.1、EventTime EventTime 表示日志事
14、Flink 笔记 - 状态编程
一、概述以wordcount为例，为什么每次输入数据，flink都能统计每个单词的总数呢？我们都没有显示保存每个单词的状态值，但是每来一条数据，都能计算单词的总数。事实上，flink在底层维护了每
15、Flink 笔记 - 检查点（CheckPoint）
一、概述 checkpoint机制是Flink可靠性的基石，可以保证Flink集群在某个算子因为某些原因(如异常退出)出现故障时，能够将整个应用流图的状态恢复到故障之前的某一状态，保证应用流图状

知者

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城