JSON

11.JSON数据格式介绍

什么是JSON

JSON(JavaScript Object Notation), javascript的对象标记. 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据格式是一致的。

轻量级

传输数据体积小，与xml相比，xml传输数据量大

数据交换，就是不同软件或应用系统之间传递的数据就是数据交换

JSON对象格式

JSON普通对象格式
	{key:value,key:value,....} 
	键和值使用冒号分隔。键可以使用双引号括起来也可以不括起来。
JSON数组对象格式
	[ obj , obj , obj , ....]
	表示一组值，多个值使用逗号分隔

JSON字符串格式

'{"key1":value1,"key2":value2,...}'  这里的key必须使用双引号括起来

数据格式示例

<script type="text/javascript">
    //1 json普通对象格式
    var user = {
        "username":"jack",
        "password":"1234"
    };
    alert(user.username); //通过key获得json数据


    //2 json数组对象格式
    var data = [
        {"id":"b001","title":"javaweb","price":"998"},
        {"id":"b002","title":"java 基础","price":"123"},
        {"id":"b003","title":"ssh","price":"250"},
    ];
    alert(data[1].title);//获取的是“java 基础”

    //3 json混合模式（普通对象+数组）
    var user2 = {
        "username":"jack",
        "password":"1234",
        "data":[
            {"id":"b001","title":"javaweb","price":"998"},
            {"id":"b002","title":"java 基础","price":"123"},
            {"id":"b003","title":"ssh","price":"250"},
        ]
    };
    alert(user2.data[2].title);//获取的是“ssh”
</script>

小结

1. json数据都有什么类型？

   json对象
   json字符串
   如何使用：服务器返回json字符串
   	    前端js接收到服务器返回的数据为json对象
   	    开发人员：接收到json对象，可以方便的解析数据
   

2. json对象都有什么类型

   1.普通对象，  解析数据：对象.属性名
   2.数组，  解析数据: 数组名[下标].属性名
   3.混合
   

12.json字符串转换工具-Jackson的使用【应用】

---

疑问

• 我们知道以后服务器返回的数据格式为json字符串给到js,js会自动将json字符串转换为json对象，方便解析数据，然而服务器端的数据都是用java对象封装的，那么如何将java对象转换为json字符串返回呢？

  

目标

​ 使用json字符串操作工具类将java对象转换为json字符串

常用第三方工具

jackson工具的使用步骤

1. 导入第三方的jar包

   

2. 利用第三方工具类将java对象转换为json字符串

   工具类的语法

   核心类ObjectMapper
   jsonString=objectMapper.writeValueAsString(java对象);	将java对象转换为json字符串的语法

转换代码

package com.itheima.jackson;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.entity.User;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JackSonTest {

    public static void main(String[] args) throws JsonProcessingException {

        /*
        * 目标：将java对象转换为json字符串
        *
        * jackson的语法：
        *       核心类：ObjectMapper
        *       类有将java对象转换为json字符串方法：writeValueAsString(java对象);
        * */

        //ObjectMapper
        ObjectMapper objectMapper = new ObjectMapper();

        //1.将JavBean转换为json字符串
        //创建对象
        User user = new User(100,"张三","123");

        //转换为json字符串
        String jsonData = objectMapper.writeValueAsString(user);

        //打印输出
        System.out.println("javaBean对象转换json字符串："+jsonData);

        //2.将Map转换为json字符串
        //创建对象
        Map<String,User> map = new HashMap<>();
        map.put("zhangsan",new User(100,"张三","123"));
        map.put("lisi",new User(101,"李四","123"));

        //转换为json字符串
        jsonData = objectMapper.writeValueAsString(map);

        //打印输出
        System.out.println("Map对象转换json字符串："+jsonData);

        //3.将List转换为json字符串
        //创建对象
        List<User> userList = new ArrayList<>();
        userList.add(new User(100,"张三","123"));
        userList.add(new User(101,"李四","123"));

        //转换为json字符串
        jsonData = objectMapper.writeValueAsString(userList);

        //打印输出
        System.out.println("List对象转换json字符串："+jsonData);
    }
}

效果

小结

• jackson可以做什么?

  将java对象转换为json字符串

• jackson的核心类对象与方法是什么?

  ObjectMapper

  writeValueAsString(java对象)

13.案例内容自动补全1-需求介绍与环境搭建【应用】

---

需求

​ 在输入框输入关键字，下拉框中异步显示与该关键字相关的用户名称

效果

​ 将素材中查询search.html页面放入到本项目中

实现步骤

1. 在素材中页面导入到项目中、jar、工具类、配置文件

   

2. 在素材中导入数据库表脚本与创建实体类

   

数据库sql

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(32) DEFAULT NULL,
  `password` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`id`)
);

INSERT INTO `user` VALUES ('1', '张三', '123');
INSERT INTO `user` VALUES ('2', '李四', '123');
INSERT INTO `user` VALUES ('3', '王五', '123');
INSERT INTO `user` VALUES ('4', '赵六', '123');
INSERT INTO `user` VALUES ('5', '田七', '123');
INSERT INTO `user` VALUES ('6', '孙八', '123');
INSERT INTO `user` VALUES ('7', '张三丰', '123');
INSERT INTO `user` VALUES ('8', '张无忌', '123');
INSERT INTO `user` VALUES ('9', '李寻欢', '123');
INSERT INTO `user` VALUES ('10', '王维', '123');
INSERT INTO `user` VALUES ('11', '李白', '123');
INSERT INTO `user` VALUES ('12', '杜甫', '123');
INSERT INTO `user` VALUES ('13', '李贺', '123');
INSERT INTO `user` VALUES ('14', '李逵', '123');
INSERT INTO `user` VALUES ('15', '宋江', '123');
INSERT INTO `user` VALUES ('16', '王英', '123');
INSERT INTO `user` VALUES ('17', '鲁智深', '123');
INSERT INTO `user` VALUES ('18', '武松', '123');
INSERT INTO `user` VALUES ('19', '张薇', '123');
INSERT INTO `user` VALUES ('20', '张浩', '123');

目录结构

14.案例内容自动补全2-后端处理请求【应用】

---

实现步骤

IUserDao代码

package com.itheima.dao;

import com.itheima.entity.User;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface IUserDao {

    //根据用户名模糊查找用户列表
    @Select("SELECT * FROM `user` WHERE NAME LIKE #{name} limit 0,4")
    List<User> findByName(@Param("name") String name);
}

UserService代码

package com.itheima.service;

import com.itheima.dao.IUserDao;
import com.itheima.entity.User;
import com.itheima.utils.MybatisUtils;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class UserService {

    //根据用户名模糊查找用户列表
    public List<User> findByName(String name){

        //1.初始化资源
        SqlSession sqlSession = MybatisUtils.getSession();
        IUserDao userDao = sqlSession.getMapper(IUserDao.class);

        //2.调用数据访问层方法，name模糊查询，加%
        List<User> userList = userDao.findByName(name + "%");

        //3.释放资源
        MybatisUtils.closeSession(sqlSession);

        return userList;
    }
}

SelectUserServlet代码

package com.itheima.web;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.entity.User;
import com.itheima.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "SelectUserServlet", urlPatterns = "/SelectUserServlet")
public class SelectUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    //实例业务
    private UserService userService = new UserService();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求数据用户名name
        String name = request.getParameter("name");

        //2.调用业务根据name查找符合的用户列表
        List<User> userList = userService.findByName(name);

        //3.将用户列表转换为json字符串并返回json
        ObjectMapper objectMapper = new ObjectMapper();//jackson工具核心类，用于转换json字符串
        String jsonData = objectMapper.writeValueAsString(userList);
        System.out.println(jsonData);
        response.getWriter().write(jsonData);
    }
}

小结

• 后端返回什么格式数据描述多条列表数据给前端？

  json

• 如何将java对象转换为json数据格式？

  jackson工具

15.案例内容自动补全3-前端提交请求与更新页面数据【应用】

---

实现步骤

search.html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动完成</title>
    <style type="text/css">
        .content {
            width: 400px;
            margin: 30px auto;
            text-align: center;
        }

        input[type='text'] {
            box-sizing: border-box;
            width: 280px;
            height: 30px;
            font-size: 14px;
            border: 1px solid #38f;
        }

        input[type='button'] {
            width: 100px;
            height: 30px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px;
        }

        #show {
            box-sizing: border-box;
            position: relative;
            left: 7px;
            font-size: 14px;
            width: 280px;
            border: 1px solid dodgerblue;
            text-align: left;
            border-top: 0;
            /*一开始是隐藏不可见*/
            display: none;
            /*
            display:控制元素是否显示，如下3个值
                none:隐藏元素
                block:块级显示，在显示结尾会换行
                inline:行级显示，在结尾不会换行
            */
        }

        #show div {
            padding: 4px;
            background-color: white;
        }

        #show div:hover {
            /*鼠标移上去背景变色*/
            background-color: #3388ff;
            color: white;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            //1.给输入框注册keyup事件
            $("#word").keyup(function () {

                //2.获取输入条件值
                var name = $(this).val();

                //3.条件值有效，就发送异步请求，传递用户名给后端
                $.post({
                    url:"SelectUserServlet",//服务器的资源地址
                    data:{name:name},//提交的请求数据
                    dataType:"json", //设置服务器返回的数据类型为json字符串，并将其转换为json对象
                    success:function (userList) {  //设置服务成功返回数据的回调函数

                        //userList 是服务器返回的数据，json对象=[{id:xx,name:xx,password:xx},{id:xx,name:xx,password:xx},...]
                        //4.根据服务器返回的数据更新到页面上显示

                        //定义拼接每一个用户数据的html代码变量
                        var html='';

                        //循环遍历用户列表数据
                        //userList.each(function(i,user){...}); 错误，因为userList是js对象数组，属于js对象
                        $(userList).each(function (i,user) {
                            //user对象格式={id:xx,name:xx,password:xx}

                            //拼接每一个用户的html代码数据
                            html+='<div οnclick="clickEvent(this);">'+user.name+'</div>';
                        });


                        //将所有拼接好的用户html代码数据设置到#show标签体内
                        $("#show").html(html);

                        //让#show标签显示出来
                        //$("#show").css("display","block");  操作样式显示元素，jquery有封装简化的代码如下
                        $("#show").show();//操作元素显示
                    },
                    error:function () {
                        alert("服务器忙。。。");
                    }

                });

            });
        });

        //每一个用户的点击事件
        function clickEvent(obj) {

            //obj，是当前用户名所属div标签对象

            //1.获取点击的用户名值
            var name = $(obj).text();

            //2.将获取的用户名设置到输入框中
            $("#word").val(name);

            //3.设置#show标签隐藏
            $("#show").hide(); //本质就是操作display=none
        }
    </script>
</head>
<body>
<div class="content">
    <img alt="传智播客" src="img/logo.png"><br/><br/>
    <input type="text" name="word" id="word">
    <input type="button" value="搜索一下">
    <div id="show"></div>
</div>

</body>
</html>

小结

• 前端什么时候发送异步请求？

  keyup

16.案例省市级联1-环境搭建与表结构数据分析【应用】

效果

环境搭建

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province">
    <option>==请选择省份==</option>
</select>
<select id="city">
    <option>==请选择城市==</option>
</select>
</body>
</html>

导入sql脚本

drop table area;
-- 同一张表中包含省和市
create table `area` (
`id` int primary key,
`name` varchar (50),
`pid` int   -- 父级的id，如果为0，表示没有父元素
); 

-- pid为0表示省，否则为某一个省下面的市
insert into `area` (`id`, `name`, `pid`) values(1,'广东省',0);
insert into `area` (`id`, `name`, `pid`) values(2,'湖南省',0);
insert into `area` (`id`, `name`, `pid`) values(3,'广西省',0);
insert into `area` (`id`, `name`, `pid`) values(4,'深圳',1);
insert into `area` (`id`, `name`, `pid`) values(5,'广州',1);
insert into `area` (`id`, `name`, `pid`) values(6,'东莞',1);
insert into `area` (`id`, `name`, `pid`) values(7,'长沙',2);
insert into `area` (`id`, `name`, `pid`) values(8,'株洲',2);
insert into `area` (`id`, `name`, `pid`) values(9,'湘潭',2);
insert into `area` (`id`, `name`, `pid`) values(10,'南宁',3);
insert into `area` (`id`, `name`, `pid`) values(11,'柳州',3);
insert into `area` (`id`, `name`, `pid`) values(12,'桂林',3);

select * from `area`;

Area实体类

public class Area {
    private int id;
    private String name;
    private int pid;
    ...   
}

项目结构

17.案例省市级联2-后端实现【应用】

实现步骤

IAreaDao代码

package com.itheima.dao;

import com.itheima.entity.Area;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface IAreaDao {

    //根据pid获取对应省份或城市列表
    @Select("SELECT * FROM `area` WHERE pid=#{pid}")
    List<Area> findByPid(int pid);
}

AreaService代码

package com.itheima.service;

import com.itheima.dao.IAreaDao;
import com.itheima.entity.Area;
import com.itheima.utils.MybatisUtils;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class AreaService {

    //根据pid获取对应省份或城市列表
    public List<Area> findByPid(int pid){

        //1.初始化资源
        SqlSession sqlSession = MybatisUtils.getSession();
        IAreaDao areaDao = sqlSession.getMapper(IAreaDao.class);

        //2.调用数据访问层方法获取省份或城市列表
        List<Area> areaList = areaDao.findByPid(pid);

        //3.释放资源
        MybatisUtils.closeSession(sqlSession);

        return areaList;
    }
}

AreaServlet代码

package com.itheima.web;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.entity.Area;
import com.itheima.service.AreaService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "AreaServlet", urlPatterns = "/AreaServlet")
public class AreaServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    //实例业务类
    private AreaService areaService = new AreaService();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.获取请求数据pid
        int pid = Integer.parseInt(request.getParameter("pid"));

        //2.调用业务获取省份或城市列表
        List<Area> areaList = areaService.findByPid(pid);

        //3.转换为json并返回
        String jsonData = new ObjectMapper().writeValueAsString(areaList);
        response.getWriter().write(jsonData);
    }
}

18.案例省市级联3-前端实现提交请求与更新页面【应用】

实现步骤

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="province">
    <option>==请选择省份==</option>
</select>
<select id="city">
    <option>==请选择城市==</option>
</select>

<script type="text/javascript">
    //1.页面加载发送异步请求获取省份列表数据，传递pid=0
    $.post({
        url:"AreaServlet",
        data:{pid:0},
        dataType:"json",
        success:function (provinceList) {
            //provinceList返回的数据=[{id:xx,name:xx,pid:xx},{id:xx,name:xx,pid:xx},...]
            //2.根据服务返回的省份列表数据，更新到省份下拉列表中显示
            //2.1 定义拼接每一个省份拼接html代码的变量
            var html = '<option>==请选择省份==</option>';
            //2.2 循环遍历省份列表，拼接每一个省份数据的html代码
            $(provinceList).each(function (i,province) {
                html+='<option value="'+province.id+'">'+province.name+'</option>';
            });
            //2.3 将所有拼接好的省份html代码数据设置到省份下拉框标签体中
            $("#province").html(html);


            //3.给省份下拉框注册change改变事件
            $("#province").change(function () {

                //4.获取省份选中项的value（当前省份的id）
                var provinceId = $(this).val();


                //5.发送异步请求获取当前省份的城市列表，传递省份id
                $.post({
                    url:"AreaServlet",
                    data:{pid:provinceId},
                    dataType:"json",
                    success:function (cityList) {
                        //6.将城市列表数据更新到城市下拉列表框中
                        //6.1 定义拼接每一个省份拼接html代码的变量
                        html='<option>==请选择城市==</option>';
                        //6.2 循环遍历城市列表，拼接每一个城市数据的html代码
                        $(cityList).each(function (i,city) {
                            html+='<option value="'+city.id+'">'+city.name+'</option>';
                        });
                        //2.3 将所有拼接好的城市html代码数据设置到城市下拉框标签体中
                        $("#city").html(html);

                    },
                    error:function () {
                        alert("服务器忙。。。");
                    }
                });
            });
        },
        error:function () {
            alert("服务器忙。。。");
        }
    });
</script>
</body>
</html>

19.总结

\1. 能够理解异步的概念

指的就是无刷新获取服务器资源的数据；

特点：

1. js发送异步请求，服务器响应返回的数据给到js,js操作dom更新页面
2. 无刷新页面原来数据不变，所以用户不用等待可以点击任何发送新的请求

\2. 能够了解原生js的ajax

ajax核心引擎对象：XMLHttpRequest

\3. 能够使用jQuery3.0的$.get()新增签名进行访问

$.get({
url:xx,
data:xx,
dataType:xx
success:xx
error:xx
});

\4. 能够使用jQuery3.0的$.post()新增签名进行访问

$.post({
url:xx,
data:xx,
dataType:xx
success:xx
error:xx
});

\5. 能够使用json转换工具Jackson进行json格式字符串的转换

1.导入jar包
2.核心代码：ObjectMappler().writeValueAsString(java对象)

\6. 能够完成用户名是否存在的查重案例

\7. 能够完成自动补全的案例

\8. 通过ajax完成省市级联的案

9.疑问：前端发送异步请求，后端进行转发或重定向跳转刷新页面，最后会不会跳转？

答：不会，跳转是有刷新的请求。浏览器页面不会有任何效果； 
js发送异步请求，服务器跳转没有放回任何数据给到js,js没有接收到数据，就不会dom更新页面

10.什么时候使用异步？什么使用使用同步？

1.页面跳转，页面切换，使用同步

2.一个页面内的更新，可以使用异步或同步

​ 异步：体验好，开发成本高，异步提交请求方式：只有一种js代码提交

​ 同步：会刷新，同步提交请求有几种方式

​ 方式1.浏览器地址栏自己输入url

​ 方式2：a标签超链接

​ 方式3：location.href 本质操作浏览器地址栏 js代码方式

(function (i,city) {
html+=’’+city.name+’’;
});
//2.3 将所有拼接好的城市html代码数据设置到城市下拉框标签体中
$("#city").html(html);

                },
                error:function () {
                    alert("服务器忙。。。");
                }
            });
        });
    },
    error:function () {
        alert("服务器忙。。。");
    }
});