JSON

最新推荐文章于 2023-11-04 12:03:24 发布

weixin_43890079

最新推荐文章于 2023-11-04 12:03:24 发布

阅读量167

点赞数 1

分类专栏：学习笔记文章标签： ajax intellij-idea

本文链接：https://blog.csdn.net/weixin_43890079/article/details/119831259

版权

学习笔记专栏收录该内容

56 篇文章 3 订阅

订阅专栏

本文详细介绍了JSON数据格式，包括其特点、语法规则，并对比了JSON与XML的区别。此外，文章阐述了Ajax的核心概念，如异步请求、运行原理，并展示了jQuery中使用Ajax的方法。同时，通过一个省市区三级联动的案例，演示了如何利用Ajax实现前后端数据交互。

摘要由CSDN通过智能技术生成

31. JSON

JSON数据格式（重要）JavaScript Object Notation缩写

定义：是一种轻量级的数据交换格式

● 特点：

1、易于程序员阅读和编写。

2、易于计算机解析和生成。

3、其实是javascript的子集：原生javascript支持JSON

<script type="text/javascript">
   var student = {
        name:'gao',
        age: 23,
        print : function() {
                        console.log("name" + this.name + ", age: " + this.age);
                 }
   }
   console.log(student.name);
    student.print()
</script>

● json是一种与语言无关的数据交换的格式，作用：

1、使用ajax进行前后台数据交换

2、移动端与服务端的数据交换

● JSON的语法规则：

JSON的语法规则十分简单，可称得上“优雅完美”，总结起来有两种结构：

1、对象格式：{"key1"：obj1, "key2":obj2, "key3":obj3...}

2、数组/集合格式: [obj1,obj2,obj3...]

注意：JSON的key是字符串，JSON的value是Object

● 规则如下:

1）映射用冒号（“：”）表示。名称:值

2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2

3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}

4）并列数据的集合（数组）用方括号(“[]”)表示。

[

{名称1:值,名称2:值2},

{名称1:值,名称2:值2}

]

5）元素值可具有的类型：string, number, object, array, true, false, null

1、对象(Object)用大括号({})表示

Student：
{
    "id" : 12,
    "name" : "java1711",
    "age" : 20,
    "gender" : "男"
}

2、数组（Array）用方括号([])表示:

List<Student>:   [{},{}]
[
    {
       "id" : 12,
        "name" : "java1711",
        "age" : 20,
        "gender" : "男"
    }
    ,
    {
       "id" : 13,
        "name" : "java1712",
        "age" : 21,
        "gender" : "女"
    }
]

● JSON和XML：

JSON常备拿来与XML做比较，因为JSON的诞生本来就或多或少要有取代XML的意思。

相比XML，JSON的优势如下：

1、没有结束标签，长度更短，读写更快。

2、能够直接被JavaScript解析器解析。

3、可以使用数组。

JSON:

{
        "id" : 12,
        "name" : "gao",
        "age"  :   30,
        "gender" : "男",
        "interests" : ["篮球", "爬山", "旅游"]
}

XML:

<root>
    <id>12</id>
    <name>gao</name>
    <age>30</age>
    <gender>男</gender>
    <interest>篮球</interest>
    <interest>爬山</interest>
    <interest>旅游</interest>
</root>

JSON可以直接使用数组，但是XML没有直接定义数组，

如果数组很长，我们的代码中就要添加大量的没有实际意义的开始和结束标签，这对于网络传输是不利的。

XML主要是用在配置文件。

https://www.baidufe.com/fehelper

● 什么是ajax？

Ajax: asynchronous javascript and xml (异步js和xml)

其是可以与服务器进行(异步/同步)交互的技术之一。

ajax的语言载体是javascript。

最大特点：异步请求，不刷新整个页面，只刷新局部也叫局部刷新。

● 什么是同步，什么是异步？

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

----易懂的理解：

异步请求：你传输吧，我去做我的事了，你传输完了告诉我一声。

同步请求：你现在传输，我要亲眼看着你传输完成，才去做别的事。

● Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，

在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，

从而执行自定义的js逻辑代码完成某种页面功能。

● Jquery的Ajax技术（重点）

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种

1）$.get(url, [data], [callback], [type]) 后面三个是可选的可以没有

2）$.post(url, [data], [callback], [type])

其中：

url：代表请求的服务器端地址

data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）

callback：表示服务器端成功响应所触发的函数

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）

常用的返回类型：text、json、html等

3）$.ajax( { option1:value1,option2:value2... } );

常用的option有如下：

async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

JSONUtil.java

public class JSONUtil {

	/**
	 * 将任意对象转换为json返回给浏览器
	 * to 
	 * @param obj
	 */
	public static void obj2Json(Object obj, HttpServletResponse response) {
		JsonConfig jsonConfig = new JsonConfig();
		String json = JSONObject.fromObject(obj, jsonConfig).toString();
		response.setContentType("text/json;charset=utf-8");
		try {
			response.getWriter().println(json);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 将任意集合对象转换为json返回给浏览器
	 * 
	 * @param obj
	 */
	public static void array2Json(Object obj, HttpServletResponse response) {
		JsonConfig jsonConfig = new JsonConfig();
		String json = JSONArray.fromObject(obj, jsonConfig).toString();
		response.setContentType("text/json;charset=utf-8");
		try {
			response.getWriter().println(json);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

ajax1.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" value="get方式请求服务器" onclick="ajaxGet()"/> <span id="spanId1"></span> <br/>
    <input type="button" value="post方式请求服务器" onclick="ajaxPost()"/> <span id="spanId2"/><br/>
    <input type="button" value="ajax方式请求服务器" onclick="ajax()"/><br/>

    <script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function ajaxGet() {
            // $.get(url, [data], [callback], [type])
            $.get('<%=request.getContextPath()%>/ajax',
                 {'name' : 'zhangsan'},
                 function(data) {// callback：表示服务器端成功响应所触发的函数
                    // 后台返回的是json对象，但是ajax自动会把json格式对象转换成js对象
                    console.log(data);
                    // {name: "李四", age: 23}
                    $('#spanId1').html(JSON.stringify(data));
                 },
                 'json'
            );
        }

        function ajaxPost() {
            // $.post(url, [data], [callback], [type])
            $.post('<%=request.getContextPath()%>/ajax',
                {'name' : 'zhangsan'},
                function(data) {// callback：表示服务器端成功响应所触发的函数
                    // 后台返回的是json对象，但是ajax自动会把json格式对象转换成js对象
                    console.log(data);
                    // {name: "李四", age: 23}
                    $('#spanId2').html(JSON.stringify(data));
                },
                'json'
            );
        }

        function ajax() {
            // $.ajax( { option1:value1,option2:value2... } );
            $.ajax({
                async : true,
                type : 'POST',
                url : '<%=request.getContextPath()%>/ajax',
                data : {'name' : '校招'},
                success : function(jsonObj) {
                    console.log(jsonObj);
                },
                dataType : 'json',
            });
        }
    </script>

</body>
</html>

AjaxServlet.java

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("AjaxServlet.doGet");
        String name = req.getParameter("name");
        System.out.println(name);

        // {"name" : "李四", "age": 23}
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().write("{\"name\" : \"李四\", \"age\": 23}");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("AjaxServlet.doPost");
        String name = req.getParameter("name");
        System.out.println(name);

        // {"name" : "李四", "age": 23}
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().write("{\"name\" : \"王五\", \"age\": 23}");
    }
}

json-lib需要的jar

● 前台向后台发送请求：

1、超链接 <a href=""></a>

2、form表单

3、location.href = ""

4、ajax

● 案例：省市区三级联动

City.java

public class City {
    private Integer id;
    private String city;

    public City() {
    }

    public City(Integer id, String city) {
        this.id = id;
        this.city = city;
    }

    public Integer getId() {
        return id;
    }

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

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

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

Province.java

public class Province {
    private Integer id;
    private String province;

    public Province() {
    }

    public Province(Integer id, String province) {
        this.id = id;
        this.province = province;
    }

    public Integer getId() {
        return id;
    }

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

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

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

AreaServlet.java

@WebServlet("/area")
public class AreaServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getParameter("method");
        switch (method){
            case "selectProvince":
                selectProvince(req, resp);
                break;
            case "selectCity":
                selectCity(req, resp);
                break;
        }
    }

    private void selectCity(HttpServletRequest req, HttpServletResponse resp) {
        System.out.println("AreaServlet.selectCity");
        String provinceId = req.getParameter("provinceId");
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        ArrayList<City> list = new ArrayList<>();
        try {
            connection = JDBCUtil.getConnection();
            String sql = "select id,city from tm_city where province_id=?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1, Integer.parseInt(provinceId));
            System.out.println(statement);
            resultSet = statement.executeQuery();
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String city = resultSet.getString("city");
                City c = new City(id, city);
                list.add(c);
            }
            for (City city : list) {
                System.out.println(city);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCUtil.close(connection, statement, resultSet);
        }

        // {}  []
        JSONUtil.array2Json(list, resp);
    }

    private void selectProvince(HttpServletRequest req, HttpServletResponse resp) {
        System.out.println("AreaServlet.selectProvince");
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        ArrayList<Province> list = new ArrayList<>();
        try {
            connection = JDBCUtil.getConnection();
            String sql = "select id,province from tm_province";
            statement = connection.prepareStatement(sql);
            System.out.println(statement);
            resultSet = statement.executeQuery();
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String province = resultSet.getString("province");
                Province p = new Province(id, province);
                list.add(p);
            }
            for (Province province : list) {
                System.out.println(province);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JDBCUtil.close(connection, statement, resultSet);
        }

        // {}  []
        JSONUtil.array2Json(list, resp);
    }
}

province_city_area.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    省份：
    <select id="provinceId" onchange="selectCity(this)">
        <option>---请选择--</option>
    </select>
    城市:
    <select id="cityId">
        <option>---请选择--</option>
    </select>
    区县:
    <select id="areaId">
        <option>---请选择--</option>
    </select>

    <script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function() {
            $.post(
                '<%=request.getContextPath()%>/area?method=selectProvince',
                function(jsonObj) {
                    console.log(jsonObj);
                    // [{id: 110000, province: "北京市"},{id: 150000, province: "内蒙古自治区"}]
                    $(jsonObj).each(function() {
                        // <option value="001">山东省</option>
                        // this
                        $('#provinceId').append('<option value="'+this.id+'">'+this.province+'</option>');
                    });
                },
                'json'
            );
        });

        function selectCity(obj) {
            console.log(obj);// <option value="001">山东省</option>
            var provinceId = $(obj).val();
            $.post(
                '<%=request.getContextPath()%>/area?method=selectCity',
                {'provinceId': provinceId},
                function(jsonObj) {
                    console.log(jsonObj);

                    $('#cityId option:gt(0)').remove();
                    $(jsonObj).each(function() {
                        // <option value="001">山东省</option>
                        // this
                        $('#cityId').append('<option value="'+this.id+'">'+this.city+'</option>');
                    });
                },
                'json'
            );
        }
    </script>
</body>
</html>