json _ ajax_跨域

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 jsonStr1 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) ???????????} ???????})

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