日常记录-JSON、Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63030688/article/details/145594173

一、JSON

JSON是JavaScript Object Notation缩写，是一种轻量级的数据交换格式，是一种与语言无关的数据交换的格式

①、特点：

1、易于阅读和编写

2、易于计算机解析和生成

3、是JavaScript的子集：原生JavaScript支持JSON

②、作用：

1、使用ajax进行前后台数据交换

2、移动端与服务端的数据交换

③、JSON数据格式

1、对象格式：{"key1"：obj1, "key2":obj2, "key3":obj3...}

2、数组/集合格式: [obj1,obj2,obj3...]

注：JSON的key是字符串，JSON的value是Object

元素值可具有的类型：string, number, object, array, true, false, null

{
    "id" : 1,
    "name" : "zhangsan",
    "age" : 20,
    "gender" : "男"
}

[
    {
       "id" : 1,
        "name" : "zhangsan",
        "age" : 20,
        "gender" : "男"
    }
    ,
    {
       "id" : 2,
        "name" : "lisi",
        "age" : 21,
        "gender" : "男"
    }
]

二、Ajax

Ajax是可以与服务器进行异步或同步交互的技术之一

1、特点：异步请求，不刷新整个页面，只刷新局部也叫局部刷新

2、运行原理：页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发设置的事件，从而执行自定义的js逻辑代码完成某种页面功能

3、与ajax操作相关的三种jquery方法

①、$.get(url, [data], [callback], [type])

②、$.post(url, [data], [callback], [type])

③、$.ajax( { option1:value1,option2:value2... } );

设置一个jsp页面来进行验证

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

</head>
<body>
    <button onclick="ajaxGet()">ajax get</button>
    <button onclick="ajaxPost()">ajax post</button>
    <button onclick="ajax()">ajax</button>

    <script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>

    <script>
        function ajaxGet() {
            //$.get(url, [data], [callback], [type]) 
            $.get(
                '/ajax',
                {'name': '张三1'},
                function (jsonObj) {// 回调函数
                    console.log(jsonObj);
                },
                'json'
            );
        }

        function ajaxPost() {
            //$.post(url, [data], [callback], [type]) 
            $.post(
                '/ajax',
                {'name': '张三2'},
                function (jsonObj) {// 回调函数
                    console.log(jsonObj);
                },
                'json'
            );
        }
        
        function ajax() {
            //$.ajax( { option1:value1,option2:value2... } );   
            $.ajax({
                async: true,//不写默认是true，发生异步请求
                url: '/ajax',
                type: 'POST',
                data: {'name': '张三3'},
                success: function (jsonObj) {
                    console.log(jsonObj);
                },
                dataType: 'json'
            });
        }
    </script>
</body>
</html>