zoukankan      html  css  js  c++  java
  • JSON简介及使用

    概念:

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。

    JSON 语法规则:JSON 语法是 JavaScript 对象表示语法的子集。

    • 数据在键值对中
    • 数据由逗号分隔
    • 花括号保存对象
    • 方括号保存数组

    JSON 名称/值对:JSON 数据的书写格式是:名称/值对。

    名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:"firstName":"John"
     
    这很容易理解,等价于这条 JavaScript 语句:firstName="John"
     

    JSON 值:JSON 值可以是:

     

     

    使用前配置

    将json.jar放入WebContentWEB-INFlib,并把AJAX运行环境配好

     下面看两个实例:

    实例一:获取后台输入的值

    servlet

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            JSONObject obj = new JSONObject();
            obj.put("name","zhang");//将这一对名值放入obj中
            response.getWriter().append(obj.toString());
            
        }

    jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#ss").click(function(){
            $.ajax({
                url:"testjson",//servlet的名字
                data:{},//固定格式
                type:"post",//固定格式
                dataType:"json",//固定格式
                success:function(httpdata){
                    
                    $("#hh").append(httpdata.name);//取出obj中的值
                }
            });
        });
    });
    </script>
    </head>
    <body>
    <span id="ss">获取对象</span>
    <ul id="hh">
    
    </ul>
    </body>
    </html>

    运行结果:点击获取对象以后,显示obj的值

    实例二:获取对象的属性值

    model

    public class Dog {
        private String name;
        private int age;
        private String owner;
        
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public int getAge() {
            return age;
        }
        public void setAge(int age) {
            this.age = age;
        }
        public String getOwner() {
            return owner;
        }
        public void setOwner(String owner) {
            this.owner = owner;
        }
    }

    controller

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //模拟从数据库中查询
            Dog d = new Dog();
            d.setName("ha");
            d.setAge(2);
            d.setOwner("ha");
            //
            JSONObject obj = new JSONObject();
            obj.put("name", d.getName());
            obj.put("age", d.getAge());
            obj.put("owner", d.getOwner());
            //
            JSONObject object = new JSONObject();
            object.put("cat", "maomim");
            object.put("dog", obj);
            
            response.getWriter().append(object.toString());
            
        }

    view

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#ss").click(function(){
            $.ajax({
                url:"testjson2",
                data:{},
                type:"post",
                dataType:"json",
                success:function(httpdata){
                    $("#hh").append("<li>"+httpdata.dog.name+"</li>");//获取dog的属性
                    $("#hh").append("<li>"+httpdata.dog.age+"</li>");
                    $("#hh").append("<li>"+httpdata.dog.owner+"</li>");
                    $("#hh").append("<li>"+httpdata.cat+"</li>");//获取cat的值
                }
            });
        });
    });
    </script>
    <body>
    <span id="ss">获取对象</span>
    <ul id="hh">
    
    </ul>
    </body>
    </html>

    运行结果:(点击运行结果,获取dog和cat的值)

  • 相关阅读:
    PathInfo模式,thinkPHP模板与控制之间的关系
    thinkPHP无法显示验证码问题
    jQuery.validate 中文API手册
    MySQL 常用函数
    MySQL插入、更新与删除数据 习题
    MySQL查询语句练习题
    在windows下SphinxCoreseek的配置安装与测试
    Ubuntu上Coreseek+PHP的安装
    Ubuntu下安装CoreSeek
    Ubuntu更新命令
  • 原文地址:https://www.cnblogs.com/jonsnow/p/6485292.html
Copyright © 2011-2022 走看看