码迷,mamicode.com
首页 > 编程语言 > 详细

Python学习笔记第二十六周(Django补充)

时间:2017-09-07 00:02:59      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:nic   fine   错误   html   表示   集成   python   server   打印   

 

一、基于jQuery的ajax实现(最底层方法:$.jax())

  $.ajax(

    url:

    type:‘‘POST“

  )

  $.get(url,[data],[callback],[type])  #callback是发送成功后就执行的函数,type是告诉服务器需要什么数据,type:text|html|json|script

  $.post(url,[data],[callback],[type])

  例子:

  $.get(‘/jquery_get/‘,{name:‘gavin‘}) //name关键字是不加引号的

  $.post(‘/jquery_get‘,{name:‘kobe‘},function(data,stateText,obj){

      console.log(data,stateText,obj)

    })  //function里的data参数是服务器端返回的数据,stateText 表示返回的状态,obj是js里的xmlHttprequest,里面包含很多数据,包含状态码,readystatus(1,2,3,4分别表示四个状态步骤)

 

  $.getJson()就是$.get()的type定义为json

  $.getScript(‘/static/test.js‘,function(){

    add(2,5)

    })   //前面表示js文件的位置,后面表示该js文件中的函数调用,这个表示即时加载时使用

 

  $.ajax({

    url:‘‘,

    type:‘POST‘,

    data:{},

  })

  例子:

  

  $.ajax({

    url:‘/jquery_get/‘,

    type:‘POST‘,

    data:{a:1,b:2},

    traditional:true //默认情况下,data里只能传送字典类型,如果data中的字典里面带字典或者字典里带列表,需要使用

    processData:false,   //告诉后端不要使用任何编码进行处理,保持原封不动,默认是true

    contentType:‘application/json’,//浏览器给服务器看的类型

    dataType:"json",//后端发送给前端的类型

    beforeSend:function(data){   //发送之前的操作

      jqXHR.setRequestHeader(‘test’: ‘haha‘) ;

     jqXHR.testData=(a:1,b:2);

    },

    success: function(data){   //回调函数

         data=JSON.parse(data) }类似于python的load,处理json的数据  

    complete:function(data){

      console.log(data);

      console.log(data,testData); //无论是否成功都会执行

    },

    error:function(data){//不success时执行

      console.log(arguments)   //打印错误信息

      alert(data);

 

    },  

  })

  

二、JSON

    json就是js的数据表现形式

    python与json对象的对应

     python         -->        json
        dict                      object
        list,tuple                array
        str,unicode               string
        int,long,float            number
        True                      true
        False                     false
        None                      null

    

    parse()和.stringify()

技术分享
parse() 用于从一个json字符串中解析出json对象,如

var str = {"name":"yuan","age":"23"}

结果:JSON.parse(str)     ------>  Object  {age: "23",name: "yuan"}


stringify()用于从一个json对象解析成json字符串,如

var c= {a:1,b:2} 

结果:  JSON.stringify(c)     ------>      {"a":1,"b":2}

注意1:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
注意2:

a={name:"yuan"};   //ok
b={name:yuan}; //ok
c={"name":"yuan"}; //ok

alert(a.name);  //ok
alert(a[name]); //undefined
alert(a[name]) //ok
View Code

 

  

 三、跨域请求

 

  同源策略机制

      浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下,不能读写对方的资源。

简单的来说,浏览器允许包含在页面A的脚本访问第二个页面B的数据资源,这一切是建立在A和B页面是同源的基础上。

如果Web世界没有同源策略,当你登录淘宝账号并打开另一个站点时,这个站点上的JavaScript可以跨域读取你的淘宝账号数据,这样整个Web世界就无隐私可言了。

  

  jsonp的js实现

         JSONP是JSON with Padding的略称。可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

JSONP就像是JSON+Padding一样(Padding这里我们理解为填充):

技术分享
#---------------------------http://127.0.0.1:8001/login

 def login(request):
    print(hello ajax)
    return render(request,index.html)
 #---------------------------返回用户的index.html
 <h1>发送JSONP数据</h1>


<script>
    function fun1(arg){
        alert("hello"+arg)
    }
</script>
<script src="http://127.0.0.1:8002/get_byjsonp/"></script>  //返回:<script>fun1("yuan")</script>

#-----------------------------http://127.0.0.1:8002/get_byjsonp

def get_byjsonp(req):
    print(8002...)
    return HttpResponse(fun1("yuan"))
View Code

这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调

将JSON数据填充进回调函数,这应该就是JSONP的JSON+Padding的含义吧。

      一般情况下,我们希望这个script标签能够动态的调用,而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务了。

技术分享
<button onclick="f()">submit</button>

<script>
    function addScriptTag(src){
     var script = document.createElement(script);
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }
    function fun1(arg){
        alert("hello"+arg)
    }
    
    function f(){
         addScriptTag("http://127.0.0.1:8002/get_byjsonp/")
    }
</script>
View Code

  为了更加灵活,现在将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调:

  

技术分享
<button onclick="f()">submit</button>

<script>
    function addScriptTag(src){
     var script = document.createElement(script);
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }
    function SayHi(arg){
        alert("Hello "+arg)
    }

    function f(){
         addScriptTag("http://127.0.0.1:8002/get_byjsonp/?callbacks=SayHi")
    }
</script>


----------------------views.py
def get_byjsonp(req):

    func=req.GET.get("callbacks")

    return HttpResponse("%s(‘yuan‘)"%func)
View Code

  jQuery对JSONP的实现

  jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法

 

技术分享
<script type="text/javascript">
    $.getJSON("http://127.0.0.1:8002/get_byjsonp?callback=?",function(arg){
        alert("hello"+arg)
    });
</script>
View Code

  结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名。

      此外,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现

技术分享
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script>

<script type="text/javascript">
   $.ajax({
        url:"http://127.0.0.1:8002/get_byjsonp",
        dataType:"jsonp",
        jsonp: callbacks,
        jsonpCallback:"SayHi"
   });
    function SayHi(arg){
        alert(arg);
    }
</script>
 
#--------------------------------- http://127.0.0.1:8002/get_byjsonp
 def get_byjsonp(req):

    callback=req.GET.get(callbacks)
    print(callback)
    return HttpResponse(%s("yuan")%callback)
View Code

  当然,最简单的形式还是通过回调函数来处理:

技术分享
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script>

<script type="text/javascript">
   $.ajax({
        url:"http://127.0.0.1:8002/get_byjsonp",
        dataType:"jsonp",            //必须有,告诉server,这次访问要的是一个jsonp的结果。
        jsonp: callbacks,          //jQuery帮助随机生成的:callbacks="wner"
        success:function(data){
            alert(data)
        }
   });

</script>
 #-------------------------------------http://127.0.0.1:8002/get_byjsonp
def get_byjsonp(req):

    callbacks=req.GET.get(callbacks)
    print(callbacks)                 #wner  

return HttpResponse("%s(‘yuan‘)"%callbacks)
View Code

  

jsonp: ‘callbacks‘就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名‘SayHi‘,server端接受callback键对应值后就可以在其中填充数据打包返回了; 

       jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。

     利用jQuery可以很方便的实现JSONP来进行跨域访问。  

  注解1: JSONP一定是GET请求

  注解2:

技术分享
<button onclick="f()">submit</button>

<script src="/static/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    function f(){
        $.ajax({
        url:"http://127.0.0.1:8002/get_byjsonp",
        dataType:"jsonp",
        jsonp: callbacks,
        success :function(data){        //传过来的数据会被转换成js对象
            console.log(data);          //Object {name: Array[2]}
            console.log(typeof data);   //object
            console.log(data.name)      //["alex", "alvin"]
        }
   });
    }
</script>
---------------------------------------------views.py
def get_byjsonp(req):

    func=req.GET.get("callbacks")

    a=json.dumps({name:(alex,alvin)})
    return HttpResponse("%s(%s)"%(func,a))


    #return HttpResponse("%s({‘name‘:(‘alex‘,‘alvin‘)})"%func)

    #return HttpResponse("%s(‘hello‘)"%func)
    #return HttpResponse("%s([12,34])"%func)
    #return HttpResponse("%s(5)"%func)
View Code

  补充:

技术分享
#views.py 中可以用  request.is_ajax() 方法判断是否是 ajax 请求,需要添加一个 HTTP 请求头:

#原生javascript:
#xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
#用 jQuery:
#用 $.ajax 方法代替 $.get,因为 $.get 在 IE 中不会发送 ajax header

#注意:is_ajax()在跨域ajax请求时不好使

is_ajax()
View Code

 

  

 

Python学习笔记第二十六周(Django补充)

标签:nic   fine   错误   html   表示   集成   python   server   打印   

原文地址:http://www.cnblogs.com/xiaopi-python/p/7487430.html

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