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

转x33g5p2x  于2022-02-07 转载在 Java  
字(8.9k)|赞(0)|评价(0)|浏览(425)

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 定义示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         var json = {
  8.        var jsonObj = {
  9. 	    "key1": 12,
  10. 	    "key2": "abc",
  11. 	    "key3": true,
  12. 	    "key4": [11, "arr", false],
  13. 	    "key5": {
  14. 	    	"key5_1": 551,
  15. 	    	"key5_2": "key5_2_value"
  16. 	    },                                       //json对象
  17. 	    "key6": [{                               //json对象数组
  18. 	    	"key6_1_1": 6611,
  19. 	    	"key6_1_2": "key6_1_2_value"
  20. 	    },{
  21. 	    	"key6_2_1": 6621,
  22. 	    	"key6_2_2": "key6_2_2_value"
  23. 	    }] 
  24. };
  26.     </script>
  27. </head>
  28. <body>
  30. </body>
  31. </html>

②、json 的访问

  • json 本身是一个对象。
  • json 中的 key 我们可以理解为是对象中的一个属性，json 中的 key 访问就跟访问对象的属性一样： json 对象.key
  • json 访问示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.           
  8.         alert(typeof(jsonObj));// object json 就是一个对象
  10.         alert(jsonObj.key1); //12
  12.         alert(jsonObj.key2); // abc
  14.         alert(jsonObj.key3); // true
  16.         alert(jsonObj.key4);// 得到数组 [11,"arr",false]
  17.          // json 中 数组值的遍历
  18.         for(var i = 0; i < jsonObj.key4.length; i++) {
  19.         	alert(jsonObj.key4[i]);
  20.         }
  22.         alert(jsonObj.key5.key5_1);//551
  23.         alert(jsonObj.key5.key5_2);//key5_2_value
  25.         alert( jsonObj.key6 );// 得到 json 数组
  26.         // 取出来每一个元素都是 json 对象
  27.         var jsonItem = jsonObj.key6[0];
  28.         // alert( jsonItem.key6_1_1 ); //6611
  29.         alert( jsonItem.key6_1_2 ); //key6_1_2_value 
  31.     </script>
  32. </head>
  33. <body>
  35. </body>
  36. </html>

③、json 的常用两个方法

  • json 的存在有两种形式。

  • 一种是：对象的形式存在，我们叫它 json 对象。

  • 一种是：字符串的形式存在，我们叫它 json 字符串。

  • 一般我们要操作 json 中的数据的时候，需要 json 对象的格式。

  • 一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。

  • JSON.stringify() 把 json 对象转换成为 json 字符串

  • JSON.parse() 把 json 字符串转换成为 json 对象

  • 示例代码：

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

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

①、javaBean 和 和 json 的互转

  1. @Test
  2. public void test1(){
  3.     Person person = new Person(1," Tommey周");
  4.     // 创建 Gson 对象实例
  5.     Gson gson = new Gson();
  6.     // toJson 方法可以把 java 对象转换成为 json 字符串
  7.     String personJsonString = gson.toJson(person);
  8.     System.out.println(personJsonString);
  9.     // fromJson 把 json 字符串转换回 Java 对象
  10.     // 第一个参数是 json 字符串，第二个参数是转换回去的 Java 对象类型
  11.     Person person1 = gson.fromJson(personJsonString, Person.class);
  12.     System.out.println(person1);
  13. }

②、List 和 json 互

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

③、map 和 json 的互转

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

4、AJAX 请求

1、什么是 AJAX 请求

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

2、原生 AJAX 请求的示例

  • ajax.html页面
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         // 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
  8.         function ajaxRequest() {
  9.             // 1 、我们首先要创建 XMLHttpRequest
  10.             var xmlhttprequest = new XMLHttpRequest();
  11.             // 2 、调用 open 方法设置请求参数
  12.             xmlhttprequest.open("GET","http://localhost:8080/ServletTest/ajaxServlet?action=javaScriptAjax",true)
  13.             // 4 、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
  14.             xmlhttprequest.onreadystatechange = function(){
  15.                 if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
  16.                     var jsonObj = JSON.parse(xmlhttprequest.responseText);
  17.                     // 把响应的数据显示在页面上
  18.                     document.getElementById("div01").innerHTML = " 年龄：" + jsonObj.age + " ,  姓名：" +
  19.                         jsonObj.name;
  20.                 }
  21.             }
  22.             // 3 、调用 send 方法发送请求
  23.             xmlhttprequest.send();
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28. <button onclick="ajaxRequest()">ajax request</button>
  29. <div id="div01"></div>
  30. </body>
  31. </html>
  • servlet类：
  1. public class AjaxServlet extends BaseServlet {
  3.     protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  4.         System.out.println("Ajax请求过来了");
  5.         Person person = new Person(1, "Tommey周");
  6.         try {
  7.             Thread.sleep(3000);
  8.         } catch (InterruptedException e) {
  9.             e.printStackTrace();
  10.         }
  11.         // json格式的字符串
  12.         Gson gson = new Gson();
  13.         String personJsonString = gson.toJson(person);
  15.         resp.getWriter().write(personJsonString);
  16.     }

3、jQuery 中的 AJAX 请求

  • $.ajax 方法

  •  url 表示请求的地址

  • type 表示请求的类型 GET 或 POST 请求

  • data 表示发送给服务器的数据

  • 格式有两种：

  • ①：name=value&name=value

  • ②：{key:value}

  • success 请求成功，响应的回调函数

  • dataType 响应的数据类型，常用的数据类型有：text 表示纯文本，xml 表示 xml 数据，json 表示 json 对象

html页面代码：

  1. <body>
  2. <button id="ajaxBtn">ajax request</button>
  3. <div id="msg"></div>
  5. <script>
  6.     $("#ajaxBtn").click(function(){
  7.         $.ajax({
  8.             url:"http://localhost:8080/ServletTest/ajaxServlet",
  9.             // data:"action=jQueryAjax",
  10.             data:{action:"jQueryAjax"},
  11.             type:"GET",
  12.             success:function (data) {
  13.                 // alert(" 服务器返回的数据是： " + data);
  14.                 // var jsonObj = JSON.parse(data);
  15.                 $("#msg").html(" 年龄：" + data.age + " ,  姓名：" + data.name);
  16.             },
  17.             dataType : "json"
  18.         });
  19.     });
  20. </script>
  21. </body>
  • $.get 方法和 $.post 方法

url 请求的 url 地址

data 发送的数据

callback 成功的回调函数

type 返回的数据类型

  • html页面代码：
  1. <script>
  2.     // ajax--get 请求
  3.     $("#getBtn").click(function(){
  4.         $.get("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryGet",function (data) {
  5.             $("#msg").html(" get  年龄：" + data.age + " ,  姓名：" + data.name);
  6.         },"json");
  7.     });
  8.     // ajax--post 请求
  9.     $("#postBtn").click(function(){
  10.         $.post("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryPost",function (data)
  11.         {
  12.             $("#msg").html(" post  年龄：" + data.age + " ,  姓名：" + data.name);
  13.         },"json");
  14.     });
  15. </script>
  • $.getJSON 方法

url 请求的 url 地址

data 发送给服务器的数据

callback 成功的回调函数

  • html页面代码：
  1. <script>
  2.     // ajax--getJson 请求
  3.     $("#getJSONBtn").click(function(){
  4.         $.getJSON("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryGetJSON",function
  5.             (data) {
  6.             $("#msg").html(" getJSON  年龄：" + data.age + " ,  姓名：" + data.name);
  7.         });
  8.     });
  9. </script>
  • 表单序列化 serialize()
  • serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。
  1. <body>
  2. <form id="form01" >
  3.     用户名：<input name="username" type="text" /><br/>
  4.     密码：<input name="password" type="password" /><br/>
  5. </form>
  6. <button id="submit">提交--serialize()</button>
  7. <div id="msg"></div>
  8. <script>
  9.     // ajax 请求
  10.     $("#submit").click(function(){
  11.         // 把参数序列化
  12.         $.getJSON("http://localhost:8080/ServletTest/ajaxServlet","action=jQuerySerialize&" +
  13.             $("#form01").serialize(),function (data) {
  14.             $("#msg").html(" Serialize  年龄：" + data.age + " ,  姓名：" + data.name);
  15.         });
  16.     });
  17. </script>
  18. </body>

Ajax使用案例

  • 使用 AJAX 验证用户名是否可用
  • regist.jsp 页面中的代码：
  1. $("#username").blur(function () {
  2. 	//1 获取用户名
  3. 	var username = this.value;
  4. 	$.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username=" +
  5. username,function (data) {
  6. 		if (data.existsUsername) {
  7. 			$("span.errorMsg").text(" 用户名已存在！");
  8. 		} else {
  9. 			$("span.errorMsg").text(" 用户名可用！");
  10. 		}
  11. 	});
  12. });
  • servlet类：
  1. protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws
  2. ServletException, IOException {
  3. 	// 获取请求的参数 username
  4. 	String username = req.getParameter("username");
  5. 	// 调用 userService.existsUsername();
  6. 	boolean existsUsername = userService.existsUsername(username);
  7. 	// 把返回的结果封装成为 map 对象
  8. 	Map<String,Object> resultMap = new HashMap<>();
  9. 	resultMap.put("existsUsername",existsUsername);
  10. 	Gson gson = new Gson();
  11. 	String json = gson.toJson(resultMap);
  12. 	resp.getWriter().write(json);
  13. }

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

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/mingyuli/article/details/122593514

内容来源于网络，如有侵权，请联系作者删除！

Javajavaweb

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com