JSON技术

1、json介绍与入门

提示：js继承，js闭包，js原型对象

键值对，格式的数据。类似Map集合的数据结构 properties 集合键值对数据

轻量级：键值对，结构简单

重量级：xml格式，结构复杂

 

1.1、什么是json

  中括号保存数组。

 

1.2、json数据的格式

键值对：

对象：

数组:

格式讲解：

“employee”：[

　　{“username1” : “zhangsan1”，”age1” : ”18” }，

　　{“username2” : “zhangsan2”，”age2” : ”18” }，

　　{“username3” : “zhangsan3”，”age3” : ”18” }，

]

1.一个对象可以有多个属性，一个属性对应一个值，对象用 { } ，属性和值都必须用“”包裹，属性与值之间用冒火隔开，属性与属性之间用逗号隔开，

 比如：{“username1” : “zhangsan1”，”age1” : ”18” }

2.多个对象之间用逗号隔开；

3.值可以为数组，数组中包含很多对象，数组必须用 [ ] , 比如 “employee”：[ 很多对象 ]

4.json最外层需要用{ }包裹

 

1.3、json格式文本转换js对象

 

获取json对象数据和遍历json数组：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     
     
     
     
     

注意事项：

1.单引号可以包裹双引号

2.注意Jason数组与Jason对象转换后获取的格式

 

1.4、使用json的三级联动案例

需求：完成省市县三级联动

页面截图：

效果：

1） 页面加载完成的时候，就要加载完成省和直辖市的数据

2） 选择省得时候，出现对应的市

3）选择市的时候，出现对应的县

 

数据库分析：

--获取所有的省和直辖市

select * from province where parentid = 0;

--获取所有的市（内蒙古中）

select * from province where parentid = 15;

--获取所有的县（锡林郭勒盟）

select * from province where parentid = 1525;

思路：

1） 页面加载完成之后，省地区的数据如何加载完成？

Window.onload 启动js函数，

发送ajax请求，获取省地区的数据

将数据返回给浏览器，

将数据添加到省一级地区的select标签中去。

2） 在用户选择下拉省一级选项之后，市地区数据如何加载完成？

Onchange事件，启动js函数

发送ajax请求，获取市地区的数据

将数据返回浏览器

将数据添加到市一级地区的select标签中去。

 

流程：

 

页面js：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
                        
             
                --请选择省--                
                  --请选择市--                
                  --请选择县或区--            
       

 

Servlet代码：

import java.io.IOException;import java.sql.SQLException;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanListHandler;import cn.itcast.domain.Province;import cn.itcast.utils.JDBCUtils;import flexjson.JSONSerializer;public class GetDataServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        // 获取请求参数        String parameter = request.getParameter("parentid");        int parentid = Integer.parseInt(parameter);        QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());        String sql = "select * from province where parentid = ?";        try {            List
     
       list = qr.query(sql, new BeanListHandler
      
       (Province.class), parentid);            //使用flexjson技术将list集合解析成json格式字符串            //创建转换对象            JSONSerializer serializer = new JSONSerializer();            //调用转换的方法            String serialize = serializer.serialize(list);                        //将数据，发给浏览器            response.setContentType("text/html;charset=utf-8");            response.getWriter().write(serialize);        } catch (SQLException e) {            e.printStackTrace();        }    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }}