JavaWeb篇-Json&Ajax

系统管理员 2021-06-10 20:40 403阅读 0赞

### 文章目录 ###

*  Json&Ajax
 *   *  Json
     *   *  Json在JavaScript中使用
         *   *  json的定义
             *  json的访问
             *  json对象转字符串
             *  json字符串转json对象
         *  Json在Java中使用
         *   *  javaBean和json的互转
             *  List 和json的互转
             *  map 和json的互转
     *  Ajax
     *   *  原生ajax请求
         *  Jquery中的ajax请求
         *   *  $.ajax(\{\});
             *   . g e t ( ) 和 .get()和 .get()和.post()
             *  $.getJSON()
             *  serialize()

# Json&Ajax #

## Json ##

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

### Json在JavaScript中使用 ###

#### json的定义 ####

var jsonOhbj = { 
    				"key1":12,
    				"key2":"abc",
    				"key3":true,
    				"key4":[11,"arr",false],
    				"key5":{ 
    					"key5_1" : 551,
    					"key5_2" : "key5_2_value"
    				},
    				"key6":[{ 
    					"key6_1_1":6611,
    					"key6_1_2":"key6_1_2_value"
    				},{ 
    					"key6_2_1":6621,
    					"key6_2_2":"key6_2_2_value"
    				}]
    			};

#### json的访问 ####

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
    alert(jsonObj);

#### json对象转字符串 ####

> json 的存在有两种形式。 一种是：对象的形式存在，我们叫它 json 对象
> 
> 一种是：字符串的形式存在，我们叫它 json 字符串
> 
> 一般我们要操作 json 中的数据的时候，需要 json 对象的格式
> 
> 一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串

JSON.stringify() 把 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

### Json在Java中使用 ###

#### javaBean和json的互转 ####

@Test
        public void test1(){ 
            Person person = new Person(1,"cV展示");
            // 创建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);
        }

Person.java

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

运行结果:  
![在这里插入图片描述][20210414172901902.png]

#### List 和json的互转 ####

有两种方式(见代码):

@Test
        public void test2() { 
            List<Person> personList = new ArrayList<>();
    
            personList.add(new Person(1, "cV展示"));
            personList.add(new Person(2, "cvzhanshi"));
    
            Gson gson = new Gson();
    
            // 把List转换为json字符串
            String personListJsonString = gson.toJson(personList);
            System.out.println(personListJsonString);
    
            //方式一：
            //List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
            //方式二：
            List<Person> list = gson.fromJson(personListJsonString, new TypeToken<ArrayList<Person>>(){ }.getType());
            System.out.println(list);
            Person person = list.get(0);
            System.out.println(person);
        }

PersonListType.java

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

运行结果:

![在这里插入图片描述][2021041417285133.png]

#### map 和json的互转 ####

与list类似:

@Test
        public void test3(){ 
            Map<Integer,Person> personMap = new HashMap<>();
    
            personMap.put(1, new Person(1, "cV展示"));
            personMap.put(2, new Person(2, "cvzhanshi"));
    
            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);
    
        }

PersonMapType.java

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

运行效果:

![在这里插入图片描述][20210414172840564.png]

## Ajax ##

> AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发 技术

ajax 是一种浏览器通过 js **异步**发起请求，**局部更新**页面的技术

> Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容

### 原生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" />
    		<script type="text/javascript"> function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 // // 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。 xmlHttpRequest.open("POST","http://localhost:8080/15_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true); 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>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Insert title here</title>
    	</head>
    	<body>	
    		<button onclick="ajaxRequest()">ajax request</button>
    		<div id="div01">
    		</div>
    	</body>
    </html>

servlet：

protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            System.out.println("Ajax请求过来了");
            request.setCharacterEncoding("UTF-8");
    // response.setCharacterEncoding("");
            Person person = new Person(1, "cvzhanshi");
            try { 
                Thread.sleep(500);
            } catch (InterruptedException e) { 
                e.printStackTrace();
            }
            // json格式的字符串
            Gson gson = new Gson();
            String personJsonString = gson.toJson(person);
    
            response.getWriter().write(personJsonString);
        }

### Jquery中的ajax请求 ###

#### $.ajax(\{\}); ####

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

代码演示:

如果dataType是json的胡data不需要手动转为json类型

// ajax请求
    				$("#ajaxBtn").click(function(){ 
    					
    					$.ajax({ 
    						url:"http://localhost:8080/15_json_ajax_i18n/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"
    					});
    
    
    				});

####  . g e t ( ) 和 .get()和 .get()和.post() ####

$.get 方法和$.post 方法
        url 请求的 url 地址
        data 发送的数据
        callback 成功的回调函数
        type 返回的数据类型

代码演示:

// ajax--get请求
    $("#getBtn").click(function(){ 					$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) { 
    						$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
    					},"json");
    					
    				});
    				
    				// ajax--post请求
    $("#postBtn").click(function(){ 
    					// post请求 $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) { 
    						$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
    					},"json");
    					
    				});

#### $.getJSON() ####

$.getJSON 方法
        url 请求的 url 地址
        data 发送给服务器的数据
        callback 成功的回调函数

// 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() ####

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

// ajax请求
    				$("#submit").click(function(){ 
    					// 把参数序列化
    					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) { 
    						$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
    					});
    				});

<form id="form01" >
    			用户名：<input name="username" type="text" /><br/>
    			密码：<input name="password" type="password" /><br/>
    			下拉单选：<select name="single">
    			  	<option value="Single">Single</option>
    			  	<option value="Single2">Single2</option>
    			</select><br/>
    		  	下拉多选：
    		  	<select name="multiple" multiple="multiple">
    		    	<option selected="selected" value="Multiple">Multiple</option>
    		    	<option value="Multiple2">Multiple2</option>
    		    	<option selected="selected" value="Multiple3">Multiple3</option>
    		  	</select><br/>
    		  	复选：
    		 	<input type="checkbox" name="check" value="check1"/> check1
    		 	<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
    		 	单选：
    		 	<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
    		 	<input type="radio" name="radio" value="radio2"/> radio2<br/>
    		</form>			
    		<button id="submit">提交--serialize()</button>

[20210414172901902.png]: /images/20210516/4eea043e73494718b275480306bd543e.png
[2021041417285133.png]: /images/20210516/81d8dc5a20614ef68674f297658782e1.png
[20210414172840564.png]: /images/20210516/2deb42417c6442cb9ae10ba087699a72.png