json、ajax

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的语法规则十分简单，可称得上“优雅完美”，总结起来有：

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
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... } ); 语法：\).ajax({键值对});
常用的option有如下：
async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

JSON数据和Java对象的相互转换
常见的JSON解析器：Jsonlib，Gson，fastjson，jackson(SpringMVC内置的解析器)

1、导入jackson的相关jar包
2、创建Jackson核心对象 ObjectMapper
3、调用ObjectMapper的相关方法进行转换
3.1、JSON转为Java对象
readValue(json字符串数据,Class)
3.2、Java对象转换JSON
writeValueAsString(obj):将对象转为json字符串

复杂java对象转换

List：数组 []
Map：对象格式一致 {}

注解：

@JsonIgnore：排除属性。
@JsonFormat：属性值得格式化
@JsonFormat(pattern = "yyyy-MM-dd")
//@JsonIgnore // 忽略该属性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;

//Java对象转为JSON字符串

@Test
public void test1() throws Exception {
    //1.创建Person对象
    Person person  = new Person();
    person.setName("张三");
    person.setAge(23);
    person.setGender("男");
    //2.创建Jackson的核心对象  ObjectMapper
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(person);
    // {"name":"张三","age":23,"gender":"男","birthday":null}
    System.out.println(json);
}

@Test
public void test4() throws Exception {
    //1.创建map对象
    Map<String,Object> map = new HashMap<String,Object>();
    map.put("name","张三");
    map.put("age",23);
    map.put("gender","男");
    //2.转换
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(map);
    System.out.println(json);//{"gender":"男","name":"张三","age":23}
}

//演示 JSON字符串转为Java对象
@Test
public void test5() throws Exception {
   //1.初始化JSON字符串
    // String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
    String json = "";
    //2.创建ObjectMapper对象
    ObjectMapper mapper = new ObjectMapper();
    //3.转换为Java对象 Person对象
    Person person = mapper.readValue(json, Person.class);
    System.out.println(person);
}

前台向后台发送请求：
1、超链接
2、form表单
3、location.href = ""
4、ajax
1、

2、案例：省市区三级联动

3、ECharts

posted @ 2022-12-16 15:11 kingwzun 阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

kingwzun

json、ajax

JSON

Ajax

公告