Json的基本操作教程

小兔叽 可爱的博主

时间: 2020-10-13 阅读: 160 字数:11423

json js html
{}
JSON采用完全独立于语言的文本格式，而且很多语言都提供了对json的支持（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这样就使得JSON成为理想的数据交换语言。

1、什么是JSON?

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 JSON采用完全独立于语言的文本格式，而且很多语言都提供了对json的支持（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这样就使得JSON成为理想的数据交换语言。

json是轻量级的数据交换格式。

轻量级是指跟xml格式比较。

2、Json在JavaScript中的使用。

2.1、json的定义

json是由键值对组成。键必须使用引号引起来，键和值之间使用冒号进行分隔，多组键值对之间使用逗号进行分隔。

由花括号（大括号）包含所有的键值对。

var 变量名 = {

“key1” : value ,

“key2” : value

};

json的值可以有很多种数据类型

可以是number类型

可以是String类型

可以是boolean类型

也可以是一个json对象

也可以是js的数组

还可以是json数组。

整体上我们json一个对象。

​ // json的定义

​            var json = {
​                    "key1" : 12,
​                    "key2" : "abc",
​                    "key3" : [3,"str3",**true**],
​                    "key4" : {
​                        "key4_1" : 41,
​                        "key4_2" : "str42"
​                    },
​                    "key5" : [
​                        {
​                            "key5_1_1" : 511,
​                            "key5_1_2" : "str512"
​                        } , 
​                        {
​                            "key5_2_1" : 521,
​                            "key5_2_2" : "str522"
​                        }
​                    ]
​            };

2.2、json的访问

json对象.key值

​ // json的访问

// alert( json.key1 ); // 12

// alert( json.key2 ); // abc

// alert( json.key3[2] ); // true

// alert( json.key4.key4_2 ); // str42

​ alert( json.key5[0].key5_1_2 ); // str512

2.3、Json的两个常用方法

JSON.stringify() 将json对象转换成为json字符串

JSON.parse() 将json字符串转换为json对象

​ // json对象转字符串

​ var jsonString = JSON.stringify( json );

​ // json字符串转json对象

​ var jsonObj = JSON.parse( jsonString );

​ alert( jsonObj.key2 );

3、Json在java中的使用

我们这里主要讲解 谷歌提供的一个专门用来操作json的工具包。叫gson.jar

gson-2.2.4.jar

3.1、javaBean和json的互转

public class Person {

​    private Integer id;

​    private String name;

​    @Test

​    public void testJavaBeanToJson() throws Exception {

​        Person person = new Person(1, "华仔");

​        // 创建谷歌提供的工具类

​        Gson gson = new Gson();

​        // toJson 把对象转换成为json字符串

​        String personJsonString = gson.toJson(person);

​        System.out.println( personJsonString );

​        // fromJson 是把json字符串转换回javaBean对象

​        Person p1 = gson.fromJson(personJsonString, Person.class);

​        System.out.println( p1 );

​    }

3.2、List 和json的互转

​    @Test
​    public void testListToJson() throws Exception {

​        List<Person> persons = **new** ArrayList<Person>();

​        

​        persons.add(new Person(1, "阿喜最帅"));

​        persons.add(new Person(2, "阿喜最优雅"));

​        persons.add(new Person(3, "阿喜说了算"));


​        Gson gson = new Gson();

​        // 把list集合转换为json字符串

​        String personListJsonString = gson.toJson(persons);

​        System.out.println( personListJsonString );

​        

​        List<Person> list2 = gson.fromJson(personListJsonString, new PersonListType().getType());

​        System.out.println( list2 );

​        Person person = list2.get(0);

​        System.out.println( person );

​    }

3.3、map 和json的互转

​    // 3.3、map 和json的互转
@Test
    public void testMapToJson() throws Exception {
        Map<String, Person> map = new HashMap<String, Person>();
        map.put("p1", new Person(1, "飞龙"));
        map.put("p2", new Person(2, "振国"));
        map.put("p3", new Person(3, "大师"));
        
        Gson gson = new Gson();
        // 把map集合转换成为json字符串
        String mapJsonString = gson.toJson(map);
        System.out.println( mapJsonString );
        
        Map<String, Person> map2 = gson.fromJson(mapJsonString, new TypeToken< HashMap<String, Person> >() {}.getType());
        
        System.out.println( map2 ); 
        Person person = map2.get("p1");
        System.out.println(person);
        
    }

4、什么是Ajax请求？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。

原生的js的Ajax请求：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function ajaxRequest() {
//                 1、我们首先要创建XMLHttpRequest 
                var xmlHttpRequest = new XMLHttpRequest();
//                 2、调用open方法设置请求参数
                xmlHttpRequest.open("GET", "http://localhost:8080/day15/ajaxServlet?action=javaScriptAjax", true);
//                 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
                xmlHttpRequest.onreadystatechange = function(){
                    // 判断请求已完成，而且是成功的请求
                    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//                         alert("服务器返回的数据：" + xmlHttpRequest.responseText );
//                         document.getElementById("div01").innerHTML = xmlHttpRequest.responseText;
                        var jsonObj = JSON.parse( xmlHttpRequest.responseText );
                        document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
                    }
                }
//                 3、调用send方法发送请求
                xmlHttpRequest.send();
                
                alert("Ajax代码已完成");
            }
        </script>
    </head>
    <body>    
        <button onclick="ajaxRequest()">ajax request</button>
        <button onclick="ajaxRequest()">ajax request</button>
        <button onclick="ajaxRequest()">ajax request</button>
        <button onclick="ajaxRequest()">ajax request</button>
        <button onclick="ajaxRequest()">ajax request</button>
        <button onclick="ajaxRequest()">ajax request</button>
        <button onclick="ajaxRequest()">ajax request</button>
        <a href="login.jsp">login.jsp</a>
        <div id="div01">
        </div>
    </body>
</html>

5、Jquery中的Ajax请求方法

$.ajax方法

标签 描述
url 请求的资源地址
type 请求的类型 GET或POST
data 发送给服务器的数据。数据格式可以是:name=value&name=value 也可以是： {key:value,key2:value}
success 响应的函数(成功的回调函数)
dataType 服务器返回的数据类型。 常用值是：text（普通文本）、xml（返回数据格式是xml）、json(返回数据是json对象) 
​                    $.ajax({
​                        url:"http://localhost:8080/day15/ajaxServlet",
​                        type:"GET",
​                        data:"action=jqueryAjax",
​                        success:**function**(data){
//                          alert("服务器返回的数据：" + data);
//                          var jsonObj = JSON.parse( data );
​                            $("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
​                        },
​                        dataType:"json"
​                    });

$.get方法 和 $.post方法

标签 描述
url 请求的资源地址
data 发送给服务器的数据。数据格式可以是:name=value&name=value 也可以是： {key:value,key2:value}
callback 响应的函数(成功的回调函数)
type 服务器返回的数据类型。 常用值是：text（普通文本）、xml（返回数据格式是xml）、json(返回数据是json对象)

ajax--get请求

​                $("#getBtn").click(function(){
​                  $.get("http://localhost:8080/day15/ajaxServlet",{"action":"jqueryGet"},function(data){
​                        $("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
​                    },"json");
​                });

ajax--post请求

​                $("#postBtn").click(**function**(){
​                    // post请求
           $.post("http://localhost:8080/day15/ajaxServlet","action=jqueryPost",**function**(data){
​                        $("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
​                    },"json");
​                });

$.getJSON方法

标签 描述
url 请求的资源地址
data 发送给服务器的数据。数据格式可以是:name=value&name=value 也可以是： {key:value,key2:value}
callback 响应的函数(成功的回调函数) 
 $.getJSON("http://localhost:8080/day15/ajaxServlet",{"action":"jqueryGetJSON"},
 function(data){
​   $("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
  });

表单序列化serialize()

是把表单form标签中所有表单项以name=value&name=value的形式拼接好返回。
​                // ajax请求
​                $("#submit").click(function(){
​                    // 把参数序列化
 $.getJSON("http://localhost:8080/day15/ajaxServlet","action=jquerySerialize&" + $("#form01").serialize() ,function(data){
​                        $("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
​                    });
​                });
本文章网址:https://www.sjxi.cn/detil/5b0041f1236e459cac2ac1a900e5e8e4

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复