Django-Ajax

Ajax准备知识-json

1.什么是json
json用来做不同语言之间的数据交换,是不同语言之间交流的桥梁,以前都用xml

{ name: "张三", 'age': 32 }                     // 属性名必须使用双引号

[32, 64, 128, 0xFFF] // 不能使用十六进制值

{ "name": "张三", "age": undefined }            // 不能使用undefined

{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}    // 不能使用函数和日期对象
}
使用json的注意事项

2.json做序列化
python <<===>> json

import json
json.dumps() 序列化 python ===>> json
json.loads() 反序列化

js <<====>> json

JSON.stringify() 序列化
JSON.parse()   反序列化

Ajax简介

AJAXAsynchronous Javascript And XML)翻译成中文就是异步JavascriptXML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

也是客户端给服务端发送请求的一种方式

form表单
a标签
地址栏
ajax
客户端给服务端发送请求的方式

两个特点:

异步             不等待服务器返回结果 继续干别的事情
局部刷新     url不变

使用ajax的步骤

1.确定事件

ajax不会闲的没事自己触发执行,需要事件去触发执行呢

例如:放在button的click事件中
        <button class="ajax1">ajaxsend</button><span class="info"></span>
        <script>
            $('button').click(function () {
                $.ajax({
                    url:'/sendajax/',
                    type:'get',
                    success:function (data) {
                        $('.info').html(data)
                    }
                })
            })
        </script>

2.格式以及必要参数

$().ajax({
        url:'/sendajax/', #必选参数 路径
        success:function () {} #必选参数 如果成功的话就执行函数  (data)接收的是服务端返回给客户端的数据
        type:'get' or 'post' #默认为get 大小写均可
        data:{                #发送给服务端的数据 自己组建键值对
            "k1":"v1",
            "k2":"v2"    
        } 
    })

3.ajax的参数

$().ajax({
        url:'/sendajax/', #必选参数 路径
        success:function () {} #必选参数 如果成功的话就执行函数  (data)接收的是服务端返回给客户端的数据
        type:'get' or 'post' #默认为get 大小写均可
        data:{                #发送给服务端的数据 自己组建键值对 当前ajax请求要携带的数据,是一个json的object对象,ajax方法就会默认地把它编码成某种格式
            "k1":"v1",
            "k2":"v2"    
        } 
    error: function (jqXHR, textStatus, err)
        {
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态
// err: 底层通过throw抛出的异常对象,值与错误类型有关 err是错误信息
console.log(arguments); }, })

 比较重要的一个参数 contentType

contentType 告诉服务器我客户端的数据是以什么编码发过去的 注意注意:这里(客户端)用什么编码,服务器就用什么解码
    默认值: contentType:"application/x-www-form-urlencoded",     数据格式:?user=alex&pwd=123
    其他方式: contentType:"application/json",                     数据格式:{"user":"alex","pwd":"123"}  字典格式 双引号 
        
    服务端取数据:
    这样取出来的数据并不是元数据,是字典,是经过包装的
    name=request.POST.get('name')
    pwd=request.GET.get('pwd') #{"user":"alex","pwd":"123"}
    
    我们直接取出的数据,经过了Django的处理 处理过程基本是
    服务端识别客户端的编码 "application/x-www-form-urlencoded" 
    通过request.body() 拿到的数据是:?user=alex&pwd=123
    然后Django自己处理数据格式 
    我们通过
    name=request.POST.get('name')
    pwd=request.GET.get('pwd') #{"user":"alex","pwd":"123"}
    拿到的是字典 也就是Django从request.body()里 处理好格式的数据
    ##注意 request.POST/GET.get() 这种取值的方式对应的就是客户端使用"application/x-www-form-urlencoded"这种编码,如果换了,用这种方法可就不一定能取出值来了
    但是request.body()是一定可以的,这里可是元数据哦
    
    如果用 "application/json" 这种方式发送数据 发送的是json字符串
    首先用request.POST/GET.get() 肯定是拿不到数据了
    现在客户端发给服务端的是json字符串,服务端拿到的是json字符串,服务端不认识json数据,需要 
    import json
    obj=request.body() #b’name=yuan&pwd=123'  是个bytes类型
    json.loads(obj) 反序列化
    
    对比一下:
    request.POST   # <QueryDict:{'name':['yuan'],'pwd':'[123]'}>
    request.GET    # <QueryDict:{'name':['yuan'],'pwd':'[123]'}>
    request.body   # b’name=yuan&pwd=123' 是个bytes类型

小例子 有点小问题

客户端:
         $.ajax({
                url:'/login/',
                type:'post',
                contentType:"application/json", #告诉人家用json了
                data:JSON.stringify(  #data数据就得用json JSON.stringify()序列化  我还以为自己会序列话呢  还得我自己序列化
                    {
                        name:name,
                        pwd:pwd,
                    }
                ),
    服务端:
        s=request.body.decode('utf8') #变成json字符串了 不是json的字节了
        import json
        d=json.loads(s) #我去 发序列化了一下咋就成字典了呢  还是要自己试试呢
        print(d['name'])
        

 解决csrf Django针对post的安全机制

如果是form表单 直接在表单里增加 {% csrf_token %} 这个就好了

方式一:

个人觉得用这个方便

添加请求头 就不是data里的值了 
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>  ##这里走的是cdn 应该导入文件
    $.ajax({
         headers:{"X-CSRFToken":$.cookie('csrftoken')},
         })    
#实现原理:通过jquery操作cookie拿到key对应的值

方式二:

$.ajax({
            data:{
                csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val()
            },

实现的原理:
            在html的某一个位置 写上 {% csrf_token %} 这样会在页面渲染一个 这样的input标签
            <input type="hidden" name="csrfmiddlewaretoken"
            value="fQLSrDayErQNNzyvxLNa7WcmHKuJtwOxdjUmqOymnLUOkGFJDwGwFRshOjFoamHO">
            通过在data里的设置拿到key-csrfmiddlewaretoken对应的value,key不变,主要就是拿到固定key对应的value这个随机字符串

方式三:

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        $.ajax({
            data:{
                csrfmiddlewaretoken:$.cookie("csrfmiddlewaretoken")
            },    
        或者:
        <script src="{% static 'js/jquery.cookie.js' %}"></script>
        $.ajax({
        headers:{"X-CSRFToken":$.cookie('csrftoken')},
        })    
实现原理:
    利用jquery操作cookie拿到key
-csrfmiddlewaretoken对应的value

 form组件

http://www.cnblogs.com/lazyball/p/7994481.html

原文地址:https://www.cnblogs.com/lazyball/p/7988782.html