JSON数据格式与Ajax技术

最新推荐文章于 2023-04-01 16:18:40 发布

Alicization~Iris

最新推荐文章于 2023-04-01 16:18:40 发布

阅读量161

点赞数

分类专栏： Java学习相关文章标签： ajax java js javascript json

本文链接：https://blog.csdn.net/qq_44296442/article/details/119830047

版权

Java学习相关专栏收录该内容

18 篇文章 1 订阅

订阅专栏

JSON数据格式介绍

JSON数据格式主要用于：
1、使用ajax进行前后台数据交换
2、移动端与服务端的数据交换

主要有两种结构：
1、对象格式：{“key1”：obj1, “key2”:obj2, “key3”:obj3…}
2、集合格式: [obj1,obj2,obj3…]
注意：JSON的key是字符串，JSON的value是Object。

一些注意点：
1、并列的数据之间用逗号隔开。
2、对象用大括号（“{}”）表示。
3、对象的集合用方括号(“[]”)表示，对象与对象之间用逗号隔开。
4、元素值的类型可以是：string, number, object, array, true, false, null。

Ajax技术

Ajax: asynchronous javascript and xml (异步js和xml)
它是可以与服务器进行(异步/同步)交互的技术之一
语言载体：javascript
最大特点：异步请求，不刷新整个页面，局部刷新

同步与异步简单理解：
同步：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
异步：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

jQuery的Ajax技术

在jQuery中对js原生的ajax进行了封装，经常使用的有三种
1、$ .get(url, [data], [callback], [type]) 后面三个是可选的可以没有
2、$ .post(url, [data], [callback], [type])
以上两种分别是以get和post的方式向服务器发送请求

参数介绍：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback（回调函数）：表示服务器端成功响应所触发的函数
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

3、$.ajax( { option1:value1,option2:value2… } );
这种方式get和post请求都可以发送
常用的option有如下：
async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" charset="UTF-8"></script>
</head>
<body>
    <input type="button" value="get方式请求服务器" onclick="ajaxGet()"></input><span id="spanId1"></span><br>
    <input type="button" value="post方式请求服务器" onclick="ajaxPost()"></input><span id="spanId2"></span><br>
    <input type="button" value="ajax方式请求服务器" onclick="ajax()"></input><br>

    <script type="text/javascript">
        function ajaxGet() {
            $.get(
            	'<%=request.getContextPath()%>/ajax',
                {'name' : 'zhangsan'},
                function(data) {// callback(回调函数): 表示服务器成功响应所触发的函数
                    // 后台返回的是json对象，但是Ajax自动把json格式对象转换成js对象
                    console.log(data);
                    $('#spanId1').html(JSON.stringify(data));
                },
                'json'
            );
        }

        function ajaxPost() {
            $.post('<%=request.getContextPath()%>/ajax',
                {'name' : 'lisi'},
                function(data) {// callback(回调函数): 表示服务器成功响应所触发的函数
                    // 后台返回的是json对象，但是Ajax自动把json格式对象转换成js对象
                    console.log(data);
                    $('#spanId2').html(JSON.stringify(data));
                },
                'json'
            );
        }

        function ajax() {
            $.ajax({
                async : true,
                type : 'GET',
                url : '<%=request.getContextPath()%>/ajax',
                data : {'name' : '小赵'},
                success : function (jsonObj) {
                    console.log(jsonObj);
                },
                dataType : 'json',
            });
        }
    </script>
</body>
</html>

Alicization~Iris

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON数据格式与Ajax技术

JSON数据格式介绍JSON数据格式主要用于：1、使用ajax进行前后台数据交换2、移动端与服务端的数据交换主要有两种结构：1、对象格式：{“key1”：obj1, “key2”:obj2, “key3”:obj3…}2、集合格式: [obj1,obj2,obj3…]注意：JSON的key是字符串，JSON的value是Object。一些注意点：1、并列的数据之间用逗号隔开。2、对象用大括号（“{}”）表示。3、对象的集合用方括号(“[]”)表示，对象与对象之间用逗号隔开。4、元素值
复制链接

扫一扫