欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

json数据传输格式、data数据(实例讲解)

程序员文章站 2022-07-03 20:32:43
json数据传输格式 本身就是字符串,key-value value可以是字符串,也可以是列表 jsonObject 以{开头,以}结尾,和字典一样 jsonArray 以...

json数据传输格式

本身就是字符串,key-value

value可以是字符串,也可以是列表

jsonObject 以{开头,以}结尾,和字典一样

jsonArray 以[开头,以]结尾list

json 允许嵌套

http请求

request请求

请求地址

请求参数

请求类型

请求方法

response响应

响应类型

成功

失败

响应内容

状态码

4xxx 请求出了问题,提供参数,路径有问题

5xxx 服务器内部逻辑,需要开发人员自行修复bug

3xxx 请求转发

ajks主要实现发送请求

beforesend 校验数据,添加统一的标识符

error 请求出现了异常

success 请求成功

complete 请求完成,不管结果如何,用来扫尾

datafilter 数据过滤,再请求成功的情况下,

http适用原则

获取使用get

提交操作post

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#get_move').click(function(){
                    // 发送Ajax请求   data 响应数据
                    $.getJSON('data/movie_list.json',function(data){
                        console.log(data);
                        //获取数据里面的data数据
                        var json_data = data['data'];
                        console.log(json_data);
                        //循环遍历,写出每一条数据的头
                        for(var i = 0;i<json_data.length;i++){
                            console.log(json_data[i].title)

//                      <p class="item">
//                              <a href="">
//                                  <img src="" />
//                                  <p>人生天地间,忽如远行客</p>
//                              </a>
//                          </p>
                        //渲染到页面中,创建DOM元素
                            //创建标签,
                            var $item = $("<p class = 'item'></p>");
                            var $img = $("<img/>");
                            var $p = $('<p></p>');
                            var $a = $("<a></a>")
                            //给标签里添加值
                            $img.prop('src',json_data[i].image);
                            $p.html(json_data[i].title);
                            $a.prop("href","https://app.vmoiver.com/"+json_data[i].postid+"?qingapp=app_new");
                            //嵌套标签
                            $a.append($img).append($p);
                            $item.append($a)
                            $('#container').append($item)
                        }

                    })
                })


            })
        </script>
        <style type="text/css">
            img{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                float: left;
            }
            p{
                height: 200px;
                line-height: 200px;
                float: left;
                /*图片混乱,干掉margin和padding*/
                margin: 0px;
                padding: 0px;
                text-align: center;
            }
            .item{
                border: 1px solid gold;
                height: 204px;
                padding: 1px;
            }
        </style>
    </head>
    <body>
        <button id="get_move">获取电影列表</button>
        <p id="container">

        </p>
    </body>
</html>

data数据

json数据传输格式、data数据(实例讲解)