码迷,mamicode.com
首页 > Web开发 > 详细

json _ ajax_跨域

时间:2018-11-08 19:12:36      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:字符串转换   back   一个   处理   htm   对象   suse   btn   opened   

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);
            {#        })#}
                })

        

 

json _ ajax_跨域

标签:字符串转换   back   一个   处理   htm   对象   suse   btn   opened   

原文地址:https://www.cnblogs.com/Skyda/p/9931151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!