JavaWeb（十一）JSON、AJAX

2022-11-16 11:51:00

JSON

作用

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

json在JavaScript中的使用

json的定义

json是由键值对组成，并且由花括号包围，每个键由引号引起来，键和值之间使用冒号进行分割，多个键值对之间使用逗号进行分割

<script type="text/javascript">
			//1. json的定义
			var jsonObj = {
				/*1.基本数据类型*/
				"key1":13,
				"key2":"hello",
				"key3":true,
				//2. 数组
				"key3":[1,"ok",false],
				//3. json
				"key4":{
					"key4_1":99,
					"key4_2":"book"
				},
				"key5":[{
					"key5_1_1":33,
					"key5_1_2":"star"
				},"world",{
					"key5_2_1":12,
					"key5_2_2":"sky"
				}]
			};
			//2.  json的访问
			// json对象转字符串
			// json字符串转json对象
		</script>

json的访问

同对象.属性一致

json的两个常用方法

1.使用方式
json有两种存在形式：json对象、json字符串
JSON.stringify():把json对象转换为字符串

var jsonString = JSON.stringify(jsonObj);//类似Java中的toString()方法

JSON。parse（）:把json字符串转换为json对象
2. 应用场景
操作json数据时使用json对象
客户端和服务器之间数据交换时，使用json字符串

json在Java中的使用

导包

Google的一个gson包
https://wwa.lanzoui.com/iSYDzp7e83c

JavaBean和json的互转

 //1. javaBean 和json 的互转
    @Test
    public void test1(){
        Person person = new Person(1,"cat");
        //创建Gson对象实例
        Gson gson = new Gson();
        //gson.toJson()方法将javabean转为json字符串
        String jsonString = gson.toJson(person);
        System.out.println(jsonString);
        //gson.from(jsonString,class)将json字符串转为一个javabean
        Person fromJson = gson.fromJson(jsonString, Person.class);
        System.out.println(fromJson);
    }

List和json的互转

    //2. List和json的互转
    @Test
    public void test2(){
        List<Person> personList = new ArrayList<Person>();
        Person person1 = new Person(1,"画画");
        Person person2 = new Person(1,"运动");
        Person person3 = new Person(1,"读书");
        personList.add(person1);
        personList.add(person2);
        personList.add(person3);
        Gson gson = new Gson();
        String jsonString = gson.toJson(personList);
        /*[{"id":1,"name":"画画"},{"id":1,"name":"运动"},{"id":1,"name":"读书"}]*/
        System.out.println(jsonString);
        //转回来
        //1. 创建一个类继承TypeToken,并指定该类的泛型为返回的集合类
        /*
        public class PersonList extends TypeToken<ArrayList<Person>> {
        }
        */
        //2. gson.fromJson()第二个参数为：new 继承类.getType()
        List<Person> personList1 = gson.fromJson(jsonString, new PersonList().getType());
        System.out.println(personList1.get(0));

map和json的互转

//3. map 和json 的互转
    @Test
    public void test3(){
        Map<Integer,Person> personMap = new HashMap<Integer,Person>();
        personMap.put(1,new Person(33,"Mac"));
        personMap.put(2,new Person(12,"iphone"));
        Gson gson = new Gson();
        String personMapJsonString = gson.toJson(personMap);
        System.out.println(personMapJsonString);
        //转回去
        //继承类
        /*
        public class PersonMap extends TypeToken<HashMap<Integer, Person>> {
        }
         */
        // Map<Integer,Person> personMap1 = gson.fromJson(personMapJsonString, new PersonMap().getType());
        //匿名内部类的方式
        Map<Integer,Person> personMap1 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());

        System.out.println(personMap1.get(2));

    }

AJAX请求

什么是AJAX请求

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

原生AJAX请求

略

JQuery中的AJAX请求

$.ajax方法

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

示例

Servlet程序

 protected void ajaxRequest(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("收到Ajax请求");
        Person person = new Person(0,"生而为人,我很抱歉");
        Gson gson = new Gson();
        String jsonString = gson.toJson(person);
        resp.getWriter().write(jsonString);

    }

$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					
					$.ajax({
						url:"http://localhost:8080/json_ajax_i18n/ajax" ,
						type: 'GET',
						data: "action=ajaxRequest",
						success:function(data){
							//alert("服务器返回的数据："+data);
							//var jsonObj = JSON.parse(data);
							$("#msg").html("编号："+data.id+",姓名："+data.name);
						},
						dataType:"json"
					})
 
				});

$.get方法和$.post方法

url表示请求的地址
data表示发送给服务器的数据格式有两种：
一：name=value&name=value
二：{key:value}
callback请求成功，响应的回调函数
type响应的数据类型

$("#getBtn").click(function() {

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

getJSON方法

只有url、data和callback三个参数

$.getJSON("http://localhost:8080/json_ajax_i18n/ajax", "action=ajaxRequest", function (data) {
						$("#msg").html("编号：" + data.id + ",姓名：" + data.name);
					})

表单序列化Serialize（）方法

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

// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					//alert($("#form01").serialize());
					$.getJSON("http://localhost:8080/json_ajax_i18n/ajax","action=jQueryAjaxSerialize&"+$("#form01").serialize(),function(data){

					})
				});

 protected void jQueryAjaxSerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("用户名:"+username);
        System.out.println("密码:"+password);
    }

输出：

码农公寓