json _ ajax_跨域

Posted 2021-01-18 Sky__liu

1 json 
    1 js 对象
        语法：
            1 通过一对{}表示一个对象
            2 在{}中允许通过 key:value 的形式来表示属性
            3 多对的属性和值之间使用 , 隔开 
    2 什么中JSON    
        按照JS对象的格式所构建出来的字符串就是JSON串
        在 ajax中，允许将复杂格式的响应数据（如列表等）构建成JSON格式的字符串再进行响应输出
    
    3 JSON的表现 
        1 JSON表示单个对象
            1 使用｛｝表示单个对象
            2 在｛｝中使用key:value的格式表示数据
            3 多对属性和值之间使用 ,隔开
            4 key必须使用"引起来"
            5 value如果是字符串的话，也需要用"引起来"
            
            ex:
                var obj={
                    "name":"MrWang",
                    "age":37,
                    "gender":"Unknown"
                }
        2 JSON 表示多个对象
            1 使用[](数组来表示多个对象)
            2 数组中允许包含多个JSON对象 或字符串
                1 使用JSON数组来表示若干字符串
                    var arr = ["王老师","王夫人","王小超"];
                    var str = ‘["王老师","王夫人","王小超"]‘;
                2 使用JSON数组来表示若干对象
                    var arr =[
                    {"name":"王老师",
                    "age":37,
                    "gender":"男"
                    },
                    {"name":"王夫人",
                    "age":15,
                    "gender":"女"}
                    ]
        2 后台处理JSON
            在后台查询数据时，需要先将数据转换为JSON格式的字符串，再响应给客户端，
            到了前端再将字符串转换为JS对象再进行解析
            1 步骤
                1 后台先获取数据
                    数据类型为：
                        1 元组
                        2 列表
                        3 字典
                2 在后台将数据转换为符合JSON格式的字符串
                3 在后台将JSON格式字符串进行响应
                4 在前端将JSON格式的字符串解析成JS的对象
            2 python 中的JSON处理
                使用python中的json类可以完成转换
                import json
                jsonStr = json.dumps(元组|列表|字典)
                return jsonStr

1 jquery ajax
    1 $obj.load(url,data,callback);
        作用：异步加载数据到$obj元素中
        参数：
            1 url:异步请求的地址
            2 data:传递给服务器端的参数（可选），该数据将决定请求方法是什么
                1 可以传递普通的字符串
                    "name=Mrwang&age=30"
                2 可以是JSON对象
                    ｛
                    "name":"MrWang",
                    "age"
                    ｝
            3 callback:异步请求成功后的回调函数（可选）
                取值为匿名函数
                    function(resText,statusText){
                        resText:响应数据
                        statusText:响应的状态文本
                        }
    2 $.get()
        1 语法：
            $.get(url,data,callback,type)
            1 url:异步请求地址
            2 data:异步请求的参数
                1 字符串：name=value&name=value
                2 JSON:{"name":"value","name":"value"}
            3 callback:请求成功时的回调函数
                function(resText){
                    resText:表示响应成功后的响应数据
                }
            4 type:响应回来的数据的类型
                1 html:响应回来的数据是html文本
                2 text:响应回来的数据是text文本
                3 json:响应回来的数据是json对象
                4 script:响应回来的数据是js脚本代码
                注意:如果此处指定了类型的话，那么在callback中，就无需再做类型的转换
    3 $.post()
    4 $.ajax()
        作用：自定所有的ajax行为
        语法：$.ajax({ajax设置的参数数据对象});
            参数：
                1 url:字符串，表示异步请求的地址
                2 type:字符串，请求方式（get,post）
                3 date:传递到服务器端的参数
                    1 字符串："name=value&name=value"
                    2 JSON对象：｛"name":"value"｝
                4 dataType:字符串，响应回来的数据的格式
                    1 html
                    2 xml
                    3 text
                    4 script
                    5 json
                    6 jsonp:有关跨域的响应格式
                5 success:回调函数，请求和响应成功时的回调函数
                    function(data){
                        data:表示服务器响应回来的数据
                    }
                6 error:回调函数，请求或响应失败时的回调函数
                7 beforeSend:回调函数，在发送ajax请求之前的回调函数，如果return false的话则表示终止本次请求
        ex:
            $.ajax({
            type: "post",
            url: UC_PATH_ + "/user/checkTtsUser",
            dataType: "json",
            ...
        })

        $.ajax({
            url:‘/05-2?city=‘+id,
            type:‘get‘,
            dataType:‘json‘,
            success:function (data) {
                var html=‘‘;
                $.each(data,function (i,j) {
                    html+=‘<option value="‘+j.id+‘">‘+j.cityname+‘</option>‘
                });
                $("[name=select_city]").html(html)
            }
        })

View Code-----ajax的实现及方法

 

---

2 跨域 - Cross Domain
    1 什么是跨域
        HTTP协议中 - 同源策略
        同源：多个地址中，相同的协议，相同域名，相同端口被视为"同源"
        在HTTP中，必须是同源地址才能相互发送请求，非同源地址被拒绝的（<script> 和 <img>）
        
        跨域：非同源的网页，在相互发送请求时需要跨域
    2 解决方案
        通过 <script> 向服务器发送请求
        由服务器资源指定前端页面的哪个方法来执行响应的数据
            
        原生的JS完成跨域请求- 通过<script>完成跨域访问
            <script>
                $(‘#btnCross‘).click(function () {
            {#        $.get(‘http://127.0.0.1:5000/06-s‘,function (data) {#}

            {#            1 动态创建script #}
                        var script = document.createElement(‘script‘);
            {#            2 为script标记的type属性赋值为text/javascript #}
                        script.type=‘text/javascript‘;
            {#            3 为script标记的src属性赋值，指定跨域访问路径 #}
                        script.src = "http://127.0.0.1:5000/06-s"
            {#            4 获取页面上的body元素#}
                        var body = document.body;
            {#            5 将script标记追加到当前的页面中(body中):也就是
                            向src的地址发送请求，同时接收响应数据，响应数据交给了页面，
                            由页面当成js的脚本去执行0#}
                        body.append(script);
            {#        })#}
                })