json详解

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"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript">
    //操作json对象
    function test1() {
        //定义一个json格式的字符串
        var text = ‘{"firstName":"John", "lastName":"Doe"}‘;
        //将json格式的字符串，转换成javascript对象
        var obj = JSON.parse(text);
        alert(obj.firstName);
        alert(obj.lastName);
    }
    //test1();

    //操作json数组
    function test2() {
        //定义一个json格式的字符串
        var text = ‘{ "employees" : [‘
                + ‘{ "firstName":"John" , "lastName":"Doe" },‘
                + ‘{ "firstName":"Anna" , "lastName":"Smith" },‘
                + ‘{ "firstName":"Peter" , "lastName":"Jones" } ]}‘;
        //将json格式的字符串，转换成javascript对象
        var obj = JSON.parse(text);
        alert(obj.employees[0].firstName);
        alert(obj.employees[1].firstName);
        alert(obj.employees[2].firstName);
    }
    test2();
</script>
</head>
<body>
</body>
</html>

注意事项：

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" %>
<c:set var="root" value="${pageContext.request.contextPath }"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省市页面</title>
<script type="text/javascript">
    //获取ajax核心对象
    function getXHR(){

        var xmlhttp;
        if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
    //第一步：完成省一级地区数据的加载

    window.onload = function(){

        //发送ajax请求，给服务器
        var xhr = getXHR();
        xhr.open("get","${root}/getData?parentid=0",true);
        xhr.send();

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseText;
                //将json格式字符串，转换成js对象
                var arr = JSON.parse(data);
                var _province = document.getElementById("province");
                //遍历循环数组，将数据添加到省一级地区的select标签中去
                for ( var i = 0; i < arr.length; i++) {
                    //不断的创建option标签
                    var _option = document.createElement("option");
                    //设置当前地区的代号
                    _option.value =  arr[i].codeid;
                    _option.innerHTML = arr[i].cityName;
                    _province.appendChild(_option);
                }
            }
        };
    };

    //第二步：选择省的时候，出现对应的市
    function _getCity(_this){
        //获取市的数据的时候，将原来的数据清空
        var _city = document.getElementById("city");
        _city.length = 1;
        var _area = document.getElementById("area");
        _area.length = 1;
        var xhr = getXHR();
        xhr.open("get","${root}/getData?parentid="+_this.value,true);
        xhr.send();

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseText;
                //将json格式字符串，转换成js对象
                var arr = JSON.parse(data);

                //遍历循环数组，将数据添加到省一级地区的select标签中去
                for ( var i = 0; i < arr.length; i++) {
                    //不断的创建option标签
                    var _option = document.createElement("option");
                    //设置当前地区的代号
                    _option.value =  arr[i].codeid;
                    _option.innerHTML = arr[i].cityName;
                    _city.appendChild(_option);
                }
            }
        };
    }
    //第三步：选择市的时候，出现对应的县
    function _getArea(_this){
        //获取县的数据的时候，将原来的数据清空
        var _area = document.getElementById("area");
        _area.length = 1;
        var xhr = getXHR();
        xhr.open("get","${root}/getData?parentid="+_this.value,true);
        xhr.send();

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseText;
                //将json格式字符串，转换成js对象
                var arr = JSON.parse(data);

                //遍历循环数组，将数据添加到省一级地区的select标签中去
                for ( var i = 0; i < arr.length; i++) {
                    //不断的创建option标签
                    var _option = document.createElement("option");
                    //设置当前地区的代号
                    _option.value =  arr[i].codeid;
                    _option.innerHTML = arr[i].cityName;
                    _area.appendChild(_option);
                }
            }
        };
    }
</script>

 </head>

  <body>
    <center>
        <select id="province" name="province" onchange="_getCity(this);">
          <option value="none">--请选择省--</option>
        </select>
        <select id="city" name="city" onchange="_getArea(this);">
            <option value="none">--请选择市--</option>
        </select>
        <select id="area" name="area" >
            <option value="none">--请选择县或区--</option>
        </select>
    </center>
  </body>
</html>

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<Province> list = qr.query(sql, new BeanListHandler<Province>(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);
    }
}
时间： 2024-07-30 16:24:54

json详解的相关文章

问题：JsonConvert;结果：JSON详解

JSON详解 JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.XML也是一种数据交换格式,为什么没 有选择XML呢?因为XML虽然可以作为跨平台的数据交换格式,但是在JS(JavaScript的简写)中处理XML非常不方便,同时XML标记比数据 多,增加了交换产生的流量,而JSON没有附加的任何标记,在JS中可作为对象处理,所以我们更倾向于选择JSON来交换数据.这篇文章主要从以下几

JSON详解+ C# String.Format格式说明+ C# ListView用法详解 很完整

JSON详解 C# String.Format格式说明 C# ListView用法详解 很完整

jQuery解析json详解

jQuery解析Json详解:http://www.cnblogs.com/madyina/p/3448518.html JSON简介及用法:http://bbs.html5cn.org/thread-87020-1-1.html 不建议使用eval()函数,因为eval()接受任意的字符串,并当作JavaScript代码来处理,这个机制已经有安全隐患了 var str='{ "name": "John" }'; var obj = eval  ('(' + str

js中 json详解

json的语法可以表示以下三种类型的值. 1.简单值:可以在json中表示字符串.数值.布尔和null. 2.对象:对象作为一种复杂的数据类型,表示一组有序的键值对儿. 3.数组:数组也是一种复杂的数据类型,表示一组有序的值列表,可以通过数值索引来访问其中的值. json不支持变量.函数或对象实例,它就是一种表示结构化数据的格式. 1.1:简单值: 如下10,“aa”,json字符串与js字符串最大的区别是json字符串必须使用双引号布尔与null也是有效的json形式. 2.1:对象 对象字面

JSON详解 .net

之前json掌握的不好,浪费了好多时间在查找一些json有关的转换问题,我所知道的方法只有把json序列化和反序列化一下,但是太麻烦了我觉得,所以就在找一些更简单又方便使用的方法.也许这个会有用吧,所以先放到这以后能用到的. 原文出处:http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语

npm中package.json详解

通常我们使用npm init命令来创建一个npm程序时,会自动生成一个package.json文件.package.json文件会描述这个NPM包的所有相关信息,包括作者.简介.包依赖.构建等信息,格式是严格的JSON格式. 属性介绍 name name和version是package.json中最重要的两个字段,也是发布到NPM平台上的唯一标识,如果没有正确设置这两个字段,包就不能发布和被下载. version 包的版本号.如"1.0.0". description 包的描述信息,将

JavaScript之JSON详解

http://caibaojian.com/jquery-each-json.html http://www.json.org/json-zh.html http://www.cnblogs.com/pigtail/archive/2012/06/08/2541314.html http://www.cnblogs.com/worfdream/articles/1956449.html

JS中JSON详解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在JSON中,有两种结构:对象和数组. 1. 一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):&qu

Android Gson解析json详解

目前解析json有三种工具:org.json(Java常用的解析),fastjson(阿里巴巴工程师开发的),Gson(Google官网出的),解析速度最快的是Gson,下载地址:https://code.google.com/p/google-gson/ 什么是JSON: JSON即JavaScript Object Natation, 它是一种轻量级的数据交换格式, 与XML一样, 是广泛被采用的客户端和服务端交互的解决方案. JSON对象: JSON中对象(Object)以"{"