GVKun编程网logo

django--ajax

14

对于django--ajax感兴趣的读者，本文将提供您所需要的所有信息，并且为您提供关于64Django--Ajax、Ajax与Django、djdjango与ajax交互、Django-AJAX的宝

对于django--ajax感兴趣的读者，本文将提供您所需要的所有信息，并且为您提供关于64 Django -- Ajax、Ajax 与 Django、dj django 与 ajax 交互、Django - AJAX的宝贵知识。

本文目录一览：

django--ajax

django--ajax

Ajax：是一个js的技术，发送请求的一种途径

    特性：
    1.局部刷新
    2.异步
    3.传输的数据量小

 

简单实例：

1.不刷新页面去实现input框的计算（异步的实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>index</h1>
{% csrf_token %}

<input type="text" name="i1">
+
<input type="text" name="i2">
=
<input type="text" name="i3">

<button id="b1">计算</button>

<hr>
<input type="text" name="i4">
+
<input type="text" name="i5">
=
<input type="text" name="i6">

<button id="b2">计算</button>



<script src="/static/jquery.js"></script>

<script>
    $(''#b1'').click(function () {
        $.ajax(
            {
                url: ''/add/'',
                type: ''post'',
                data: {
                    ''i1'': $(''[name="i1"]'').val(),
                    ''i2'': $(''[name="i2"]'').val(),
                },
                success: function (data) {
                    $(''[name="i3"]'').val(data)
                },
            }
        )
    });
    $(''#b2'').click(function () {
        $.ajax(
            {
                url: ''/add1/'',
                type: ''post'',
                data: {
                    ''i1'': $(''[name="i4"]'').val(),
                    ''i2'': $(''[name="i5"]'').val(),
                },
                success: function (data) {
                    $(''[name="i6"]'').val(data)
                },
            }
        )
    });

</script>
</body>
</html>
html文件 
url(r''^index/'', views.index),
    url(r''^add/'', views.add),
    url(r''^add1/'', views.add1),
url.py 
def index(request):
    return render(request,''index.html'')
import time
def add(request):
    i1=request.POST.get(''i1'')
    i2=request.POST.get(''i2'')

    i3=int(i1)+int(i2)
    time.sleep(60)#测试异步
    return HttpResponse(i3)

def add1(request):
    i1=request.POST.get(''i1'')
    i2=request.POST.get(''i2'')

    i3=int(i1)+int(i2)
    return HttpResponse(i3)
view.py

 

总结：

html页面要想提交post请求，必须加{% csrf-token %}或者在index函数加ensure_csrf_cookie装饰器,确保设置的cooki的csrftoken

Ajan请求的格式：

$(''#b1'').click(function(){
    $.ajax(
    {
        url:''/add/'',//处理请求的地址
        type:''post'',//处理请求的方式
        data：{        //获得请求的数据
            ''i1'':$(''[name="i1"]'').val(),
            ''i2'':$(''[name="i2"]'').val()
        }
        success:function(res){//view处理成功后返回的结果，可以为Httpresponse对象（那么res为字符串），也可以为Jsonreaponse（那么res会转化为原格式的数据）
            console.log(res)
        }
        error:function(res){//view处理失败返回的结果
            consoloe.log(res)
        }
    }
    
    )
}
)

 

2.上传文件//测试ajax传输的数据的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>index</h1>
{% csrf_token %}

<button id="b3">参数测试</button>
<hr>
<input type="file" name="f1"><button id="b4">上传</button>


<script src="/static/jquery.js"></script>

<script>
       $(''#b3'').click(function () {
        $.ajax(
            {
                url: ''/test/'',
                type: ''post'',
                data: {
                    ''name'': ''alex'',
                    ''hobby'': JSON.stringify([''抽烟'', ''喝酒''])
                },
                success: function (res) {
                    console.log(res)
                },
                error: function (res) {
                    console.log(res)
                }

            }
        )
    });
    $(''#b4'').click(function () {
        var file_obj=new FormData();//得到一个formdata对象
        file_obj.append(''fi'',$(''[name="f1"]'')[0].files[0]);//给对象添加键值对

        //写ajax请求
        $.ajax(
            {
                url:''/upload/'',//ajax交给的url地址
                type:''post'',//提交的方式
                data:file_obj,//提交的数据
                contentType:false,//不处理提交的contenttyle的请求头
                processData:false,//不处理编码方式
                success:function (res) {//处理成功后执行的代码，res为view处理完成后的返回值
                    console.log(res)
                }
            }
        )


    })

</script>
</body>
</html>
html代码 
url(r''^test/'', views.test),
    url(r''^upload/'', views.upload),
urls.py 
import json


def test(request):
    print(request.POST)

    # return HttpResponse(''ok'')
    # int(''s'')
    hooby = request.POST.get(''hobby'')
    print(hooby, type(hooby))  # ["抽烟","喝酒"] <class ''str''>

    hooby = json.loads(hooby)
    print(hooby, type(hooby))  # [''抽烟'', ''喝酒''] <class ''list''>

    return JsonResponse({''status'': 0, ''data'': ''ok''})


def upload(request):
    fi = request.FILES.get(''fi'')  # 获得file对象 f1
    with open(fi.name, ''wb'')as f:
        for chunk in fi.chunks():
            f.write(chunk)
    # print(name,type(name))3黄韶华实习简历.pdf <class ''django.core.files.uploadedfile.InMemoryUploadedFile''>
    # print(name.chunks)#chunks是一个绑定方法

    return HttpResponse(''ok'')
views.py

 

3.ajax通过csrf校验的方式

方式一：在data中添加csrfmiddlewaretoken的隐藏狂的键值

//前提是必须有{%  csrf-token %}
    $(''#b1'').click(function () {
        $.ajax(
            {
                url: ''/add/'',
                type: ''post'',
                data: {
                    ''csrfmiddlewaretoken'':$(''[name="csrfmiddlewaretoken"]'').val(),//方式一直接往data里面添加隐藏的input框的csrfmiddlewaretoken的值去校验
                    ''i1'': $(''[name="i1"]'').val(),
                    ''i2'': $(''[name="i2"]'').val(),
                },
                success: function (data) {
                    $(''[name="i3"]'').val(data)
                },
            }
        )
    });

方式二：在请求头headers添加x-csrftoken

$(''#b2'').click(function () {
        $.ajax(
            {
                url: ''/add1/'',
                type: ''post'',
                headers:{
                    ''x-csrftoken'':$(''[name="csrfmiddlewaretoken"]'').val(),//方式二，往headers里面添加x-csrf-token的键值
                },
                data: {
                    ''i1'': $(''[name="i4"]'').val(),
                    ''i2'': $(''[name="i5"]'').val(),
                },
                success: function (data) {
                    $(''[name="i6"]'').val(data)
                },
            }
        )
    });

方式三：

直接写一个setupajax文件，====基于x-csrftoken方式，为每一个ajan请求设置x-csrftoken

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '''') {
        var cookies = document.cookie.split('';'');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + ''='')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie(''csrftoken'');


function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});
代码

引入方式：先引入jquery，在引入setupajax文件

<script src="/static/jquery.js"></script>
<script src="/static/ajax_setup.js"></script>

 

{csrf-token}确保该地址有一个csrfmiddlewaretoken去通过校验，如果不想每次都在页面写可以引入一个装饰器ensure_csrf_cookie,确保每次访问的时候cookie都别带csrftoken

from django.views.decorators.csrf import ensure_csrf_cookie


@ensure_csrf_cookie
def index(request):
    return render(request, ''index.html'')

 

64 Django -- Ajax

64 Django -- Ajax

目录

  • Ajax
    • Ajax简介
    • AJAX常见应用情景
    • Ajax的优缺点
      • 优点：
      • 缺点：
    • Ajax简单登录认证
    • csrf认证
      • form表单设置csrf_token
      • Ajax设置csrf认证
    • 文件上传
      • 请求头Content-Type
      • form表单上传文件
      • Ajax的上传文件
    • JsonResponse
    • SweetAlert插件--对话框

Ajax

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

? AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

特点：异步请求、局部刷新

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

局部刷新：可以局部添加网页内容，如提示：用户名或者密码错误等。

AJAX常见应用情景

  1. 搜索引擎根据用户输入的关键字，自动提示检索关键字。

  2. 注册时的用户名的查重。

    ? 当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为输入的用户是否存在，最终服务器返回true表示用户名已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

    a.整个过程中页面没有刷新，只是局部刷新了；

    b.在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

  3. 提交数据，上传文件。

Ajax的优缺点

https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html

优点：

  1. AJAX使用JavaScript技术向服务器发送异步请求；
  2. AJAX请求无须刷新整个页面；
  3. 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

缺点：

  1. 安全问题，不经意间会暴露比以前更多的数据和服务器逻辑
  2. 如果用户禁用了JS，网站就取不到数据
  3. AJAX干掉了Back和History功能，即对浏览器机制的破坏。用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
  4. AJAX不能很好支持移动设备。

Ajax简单登录认证

用form表单登录，提交数据会刷新页面。ajax不会刷新。

login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div>
    <div>
    <div>
        <label>用户名</label>
        <div>
            <input type="text"placeholder="请输入用户名" id="username">
        </div>
    </div>
    <div>
        <label>密码</label>
        <div>
            <input type="password"placeholder="请输入密码" id="password">
        </div>
    </div>

    <div>
        <div>
            <button type="submit"id="sub">登 录</button>
            <span id="error"></span>
        </div>
    </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<script >

    $('#sub').click(function () {
        // 绑定点击事件，一点击 登录 会将数据提交给后端，不会刷新页面
        var username=$('#username').val();
        var password=$('#password').val();

        $.ajax({
            url:'{% url "login" %}',//
            type:'post',data:{'user':username,'pwd':password},// data会携带数据提交到url路径   res：是接收后端返回的数据
            success:function (res) {
                if(res === '1'){
                    // 表示登录成功，跳转到home页面
                    location.href='{% url "home" %}'}   
                else{
                    // 登录失败，局部刷新，添加提示
                    $('#error').text('用户名或密码错误！')
                }
            }
        })
    })
</script>
</html>

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/',admin.site.urls),url(r'^login/',views.login,name='login'),url(r'^home/',views.home,name='home'),

views.py

from django.shortcuts import render,HttpResponse,redirect


def login(request):

    if request.method=='GET':
        return render(request,'login.html')

    else:
        user = request.POST.get('user')     # 获取ajax中data携带的数据
        pwd = request.POST.get('pwd')
       
        if user == 'yan' and pwd == '123':  # 假设用户名与密码
            return HttpResponse('1')        # 登录成功返回1
        else:
            return HttpResponse('0')        # 登录成功返回0


def home(request):

    return render(request,'home.html')

csrf认证

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过HTTP请求将数据传送到服务器，从而盗取回话的cookie。盗取回话cookie之后，攻击者不仅可以获取用户的信息，还可以修改该cookie关联的账户信息。

img

? 所以解决csrf攻击的最直接的办法就是生成一个随机的csrftoken值，保存在用户的页面上，每次请求都带着这个值过来完成校验。

　token字符串的前32位是salt， 后面是加密后的token， 通过salt能解密出唯一的secret。

form表单设置csrf_token

{% csrf_token %} 标签，加上这个标签,模板渲染之后就是一个隐藏的input标签，提交数据时，会随数据一起提交给后端。

<input type="hidden" name=‘csrfmiddlewaretoken’ values=‘dkjdkasiofaad...’>

<form action="" method="post">
    {% csrf_token %} // form表单里面加上这个标签,模板渲染之后就是input标签
<div>
    <div>
    <div>
        <label>用户名</label>
        <div>
            <input type="text"placeholder="请输入用户名" id="username" name='username'>
        </div>
    </div>
    <div>
        <label>密码</label>
        <div>
            <input type="password"placeholder="请输入密码" id="password" name='password'>
        </div>
    </div>

    <div>
        <div>
            <button type="submit"id="sub">登 录</button>
            <span id="error"></span>
        </div>
    </div>
    </div>
</div>

</form>

Ajax设置csrf认证

方式一：

通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。

// 在body标签中，增加 {% csrf_token %} 标签
<script >
    $('#sub').click(function () {

        var username=$('#username').val();
        var password=$('#password').val();
        
        // csrf方式一：
        var csrf=$('[name=csrfmiddlewaretoken]').val();
        // 使用jQuery取出csrfmiddlewaretoken的值，
        $.ajax({

            url:'{% url "login" %}',type:'post','pwd':password,"csrfmiddlewaretoken":csrf},// data会携带数据
            success:function (res) {
                if(res === '1'){
                    location.href='{% url "home" %}'}
                else{
                    console.log(res);
                    $('#error').text('用户名或密码错误！')
                }
            }
        })
    })
</script>

方式二：

用 {{ csrf_token }} 变量直接获取csrfmiddlewaretoken的值

<script >

    $('#sub').click(function () {

        var username=$('#username').val();
        var password=$('#password').val();
  
        // csrf方式二：
        var csrf = '{{ csrf_token }}';
        $.ajax({

            url:'{% url "login" %}',// data会携带数据
            success:function (res) {
                if(res === '1'){
                    location.href='{% url "home" %}'}
                else{
                    console.log(res);
                    $('#error').text('用户名或密码错误！')
                }
            }
        })
    })
</script>

方式三：

引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/

通过获取返回的cookie中的字符串 放置在请求头中发送。

? Ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，发contenttype类型数据的时候，csrf_token就可以这样加。

<script >
$('#sub').click(function () {

        var username=$('#username').val();
        var password=$('#password').val();

  
        $.ajax({
            url:'{% url "login" %}',// data会携带数据

            // csrf 方式三：
            headers:{
                "X-CSrftoken":$.cookie('csrftoken'),},// 必须引入jquery.cookie.js

            success:function (res) {
                if(res === '1'){
                    location.href='{% url "home" %}';
                    {#$('#error').text('登录成功！'); }#}
                    }
                else{
                    {#console.log(res);#}
                    $('#error').text('用户名或密码错误！')
                }
            }
        })
    })
</script>

注意：

　　如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。

　　如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSrftoken的cookie。

　　这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。

django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def login(request):
    pass

文件上传

请求头Content-Type

服务端告诉浏览器，数据是以什么封装的。否则浏览器不知道怎样解开数据。

1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
    # 最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据，ajax默认也是这个。
    user=yan&pwd=123   #这就是上面这种content-type规定的数据格式，后端对应这个格式来解析获取数据，不管是get方法还是post方法，都是这样拼接数据，大家公认的一种数据格式.
    
2. Content-Type:multipart/form-data;    
    # form表单设置enctype属性时，post提交数据的方式

3. Content-Type:application/json    
    # 告诉浏览器 服务端消息主体是序列化后的 JSON 字符串。

form表单上传文件

在form中加 enctype="multipart/form-data"。form表单不支持发json类型的content-type格式的数据，而ajax什么格式都可以发，也是ajax应用广泛的一个原因。

<form action="" method="post" enctype="multipart/form-data">  
    {% csrf_token %}
    用户名: <input type="text" name="username">
    密码: <input type="password" name="password">
    文件: <input type="file" name="file"> 

    <input type="submit">

</form>

views.py

from django.conf import settings
# 能用全局settings获取一些配置，如路径等

def upload(request):
    if request.method == 'GET':
        print(settings.BASE_DIR) #/static/
        return render(request,'upload.html')

    else:
        # print(request.POST)
        # print(request.FILES)
        uname = request.POST.get('username')
        pwd = request.POST.get('password')

        file_obj = request.FILES.get('file')  #文件数据对象，相当于文件句柄

        print(file_obj.name) #获取文件名称
    
        with open(file_obj.name,'wb') as f:
            # 不能一下写进去，占用的内容太多，要一点一点写入
            
            # 方式一：一行一行读取并写入：
            # for i in file_obj:
            #     f.write(i)
            
            # 方式二：chunks()默认一次返回大小为65536B，也就是64KB，最大为2.5M的数据，是一个生成器
            for chunk in file_obj.chunks():
                f.write(chunk)
        return HttpResponse('ok')

通过js来找文件对象

分享图片

Ajax的上传文件

<script >
$('#sub').click(function () {
        
        // 创建一个对象
        var formdata = new FormData();
        
        var user = $('#username').val();
        var pwd = $('#password').val();

        var file_obj = $('[type=file]')[0].files[0]; // js获取文件对象
        
        // 封装
        formdata.append('username',user);
        formdata.append('password',pwd);
        formdata.append('file',file_obj);

        $.ajax({
            url:'{% url "upload" %}',// data:{username:user,password:pwd,csrfmiddlewaretoken:csrf},//data:{username:uname,password:pwd},data:formdata,processData:false,// 必须写，告诉不做任何预处理
            contentType:false,// 必须写

            headers:{
                "X-CSrftoken":$.cookie('csrftoken'),success:function (res) {
                console.log(res);
                if (res === '1'){
                    // $('.error').text('登录成功');
                    location.href = '/home/'; // http://127.0.0.1:8000/home/

                }else{
                    $('.error').text('用户名密码错误!');
                }
            }
        })
    })
</script>

views.py

def upload(request):
    if request.method == 'GET':
        return render(request,'wb') as f:          
            # 方式一：一行一行读取并写入：
            # for i in file_obj:
            #     f.write(i)
            
            # 方式二：chunks()默认一次返回大小为65536B，也就是64KB，最大为2.5M的数据，是一个生成器
            for chunk in file_obj.chunks():
                f.write(chunk)
        return HttpResponse('ok')

JsonResponse

发送json类型的数据

from django.http import JsonResponse


        username = request.POST.get('username')
        pwd = request.POST.get('password')
        ret_data = {'status':None,'msg':None}
        print('>>>>>',request.POST)
        #<QueryDict: {'{"username":"123","password":"123"}': ['']}>
        if username == 'chao' and pwd == '123':
            ret_data['status'] = 1000  # 状态码
            ret_data['msg'] = '登录成功!'

        else:
            ret_data['status'] = 1001  # 状态码
            ret_data['msg'] = '登录失败!'
        # 方式一  ，关闭ensure_ascii后不乱码
        # ret_data_json = json.dumps(ret_data,ensure_ascii=False)
        # return HttpResponse(ret_data_json)
        # 方式二，指定响应头
    # return HttpResponse(ret_data_json,content_type='application/json')
    
        # 方式三
        return JsonResponse(ret_data)
    
# 非字典类型数据，需要加上 safe=False参数，否则认为是不合法的
        #ret_data=[0,1,'a']
        #return JsonResponse(ret_data,safe=False)

jsontest.html

<script>
 $.ajax({
            url:'{% url "jsontest" %}',// data:{username:uname,//序列化       //data:JSON.stringify({username:uname,password:pwd}),data:{username:uname,headers:{
                // contentType:'application/json',"X-CSrftoken":$.cookie('csrftoken'),success:function (res) {
                {#console.log(res,typeof res); // statusmsg {"status": 1001,"msg": "登录失败"}#}
                // 方式一：反序列化
                {#var res = JSON.parse(res);  //-- json.loads()#}
                // 方式二、三
                console.log(res,typeof res);  //直接就是反序列化之后的了
                //JSON.stringify()  -- json.dumps
                if (res.status === 1000){
                    // $('.error').text('登录成功');
                    location.href = '/home/'; // http://127.0.0.1:8000/home/

                }
                 else{                          $('.error').text(res.msg);
                }
            }
        })
        
</script>

SweetAlert插件--对话框

img

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.0-dist/dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap-sweetalert-master/dist/sweetalert.css' %}">
</head>
<body>

<div>
    <button>删除</button>
</div>

</body>
<script src="{% static 'bootstrap-3.3.0-dist/dist/jQuery/jquery-3.1.1.js' %}"></script>
<script src="{% static 'bootstrap-3.3.0-dist/dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'bootstrap-sweetalert-master/dist/sweetalert.js' %}"></script>
<script>

    $(".btn-danger").on("click",function () {
        swal({
                title: "你确定要删除吗？",text: "删除可就找不回来了哦！",type: "warning",showCancelButton: true,confirmButtonClass: "btn-danger",confirmButtonText: "我已经下定决心",cancelButtonText: "容我三思",cloSEOnConfirm: false
            },function () {
                var deleteId = $(this).parent().parent().attr("data_id");
                $.ajax({
                    url: "/delete_book/",type: "post",data: {"id": deleteId},success: function (data) {
                        console.log(data,typeof data);
                        if (data === '1') {
                            swal("删除成功!","你可以准备跑路了！","success");
                        } else {
                            swal("删除失败","你可以再尝试一下！","error")
                        }
                    }
                })
            });
    })
</script>
</html>

Ajax 与 Django

Ajax 与 Django

[toc]

Django与AJAX

orm优化查询：

orm优化查询： 

核心： -避免重复调用数据库 ，以表为对象，将对象点属性的方式 ，查询数据
redis / mongodb  : 降低主库的压力 （缓存数据库—）
orm模块 本质将一张表 对应为对象

#1.only 与 defer :
--》惰性查询 ： 减少数据库操作 降低数据库的压力

only 与 defer 相反 ： （字段查询）

obj = only(''字段1'') ： 取字段1的值， --》列表套字典 
查询其他字段 ： 重新查找一条就是查一次数据库

defer 内字段 不在字段内 defer()
defer括号内放什么字段 查询出来的对象就没有该字段属性
总结 ： 能少查询一次数据 - 就尽量少查询次！！！


#2.select_related 与 prefetch_related: （链表操作）
    
select_related ： 
--》用于一对一，一对多表对应关系中；

优点： 将表化为对象，不需要重新取数据库操作

prefetch_related ：   所有的表关系中
    --自动外键查询的所有结果封装到对象中  
--》不限制类型 ， 为多外键字段，就查询一张表 

 select_related 与  prefetch_related 的比较：
--》结合实际情况  ： 表的大小，张数

耗时操作体现方面：
链表  ： 数据库层先链表
子查询 : 查询的次数（表）

MTV 与 MVC模型

MTV 与 MVC模型：
--》django自称为是MTV框架 本质其实还是MVC

MTV：
        M:models
        T:templates
        V:views 
MVC
        M:models
        V:views
        controller  路由匹配(包含urls)
Vue : -->前端（框架）
    --react (基于） 
        
前端乱的原因之一： 更新速度太快

choices 参数

choices  参数：
--》设置字段类型的约束条件(字段条件的选择有限），绑定对应关系 一一对应;
               
  存数字 取的时候按照提前设计的好的对应关系 取出对应的真正的数据!
               
只要是choices字段类型 在获取值的时候 统一句式：
  ---》get_字段名_display()   


eg: 
     user_obj1 = models.User.objects.get(pk=4)  
     print(user_obj1.get_gender_display())  
      # 没有对应关系 获取到的还是数字本身

update 与 save的区别

update 与 save的区别：
	--》两者都是对数据的修改保存操作，
    
save()函数是将数据列的全部数据项全部重新写一遍，

update()则是针对修改的项进行针对的更新效率高耗时少

AJAX导入：

AJAX:  (Asyn) JS  + XML
	使用Javascript语言与服务器进行异步交互，传输的数据为XML

优点：	在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

提交方式的不同：
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

ajax关键点:
    	1.局部刷新，2.异步请求


#导入ajax，js通过jquery交互：  html
<script>
    $(''#b1'').click(function () {
        $.ajax({
            url:'''',
            type:''POST'',
            data:{i1:$(''#i1'').val(),i2:$(''#i2'').val()},
            success:function (data) {
                $(''#i3'').val(data)
            }
        })
    })

</script>

#view 视图 ： 
def ajax_test(request):
    if request.method==''POST'':
        i1=request.POST.get(''i1'')
        i2=request.POST.get(''i2'')
        ret=int(i1)+int(i2)
        return HttpResponse(ret)
    return render(request,''ajax_test.html'')


---》当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来

---》异步： 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应

Jquery 实现AJAX

jquery 实现AJAX:
    
--->1. 要先导入jquery 模块
<script src="/static/setup_Ajax.js"></script>
<script>
    //给input框绑定一个失去焦点的事件
    $(''.user'').blur(function () {
        //$.ajax为固定用法，表示启用ajax
        $.ajax({
            //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
            url:'''',
            //type为标定你这个ajax请求的方法
            type:''POST'',
            //data后面跟的就是你提交给后端的数据
            data:{''username'':$(this).val()},
            //success为回调函数，参数data即后端给你返回的数据
            success:function (data) {
                ret=JSON.parse(data);
                if (ret[''flag'']){
                    $(''p>span'').removeClass(''hide'');
                }
            }
        })
    });
</script>

view视图 ： 模拟登录认证
def index(request):
    if request.method==''POST'':
        ret={''flag'':False}
        username=request.POST.get(''username'')
        if username==''JBY'':
            ret[''flag'']=True
            import json
            return HttpResponse(json.dumps(ret))
    return render(request,''index.html'')

ajax基本语法结构

ajax 参数：
	data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型


--》绑定事件

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })

ajax基本语法结构
			$.ajax({
				url:'''',  // 数据提交的后端地址  不写就是往当前页面提交  也可以写后缀 也可以写全称  跟actions一样
				type:''post'',  // 提交方式  默认是get请求
				data:{''i1'':$(''#d1'').val(),''i2'':$(''#d2'').val()},  // 提交的数据
				success:function (data) {  // 形参data就是异步提交之后后端返回结果
					$(''#d3'').val(data)  // 回调机制需要做的事情
				}
			})
		# 一旦使用了ajax render,redirect,HttpResponse都不再作用与页面 而是与data交互

原生JS 实现AJAX

原生JS 实现AJAX:
  var b2 = document.getElementById("b2");
  b2.onclick = function () {
    // 原生JS
    var xmlHttp = new XMLHttpRequest();   	# 创建类
    xmlHttp.open("POST", "/ajax_test/", true);            #urlencoded： 请求方式
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.send("username=q1mi&password=123456");   #真实数据
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        alert(xmlHttp.responseText);   
      }
    };
  };

readyState  ？？？

前后端传输数据编码格式：

AJAX请求方式：
	只要是向我Django提交post请求的数据，都必须校验csrf_token来防伪跨站请求
   ajax默认的编码格式也是urlencoded 也就意味着后端django也是将数据解析到request.POST中

POST : request.POST
       request.FILES  文件

ajax发送数据的编码格式：
1.urlencoded
2.formdata
3.application / json  (json格式）

前端向后端发送请求：
   a标签href参数               get请求
		form表单			   get/post
		ajax                  get/post                    
form表单发送数据的编码格式：
	1.form表单默认的编码方式是urlencoded
	Content-Type: application/x-www-form-urlencoded
	django后端针对urlencoded数据 会自动解析并且帮你封装到request.POST中

	2.form表单发送文件 编码格式 Content-Type: multipart/form-data;
	针对formdata格式的数据 你在浏览器上是无法查看到（POST请求）
	是一个文件对象django后端也会自动识别帮你放到request.FILES中

	3.form表单无法发送json格式的数据  只能借助于ajax


注意： 涉及到前后端交互的时候 一定要做到数据的格式与编码格式一致（即：数据是一种格式  请求头里面是同一种格式）

Ajax如何传输json格式数据

传输类型： 
    Content-Type: application/json
    {"username":"jason","password":"123"}
django后端针对json格式的数据 不会做任何处理 数据怎么来的 会原封不动的放到request.body中

# 触发事件，数据传输！！
$(''#d1'').click(function () {
        $.ajax({
            url:'''',
            type:''post'',
            contentType:''application/json'',  
            data:JSON.stringify({''username'':''jason'',''password'':''123''}),  
            success:function (data) {
                alert(123)
            }
        })
    })

ajax 传输文件数据

->借助内置对象  new  -->生成对象
该对象即可以携带文件数据 同样也支持普通的键值对

$(''#d1'').click(function () {
				
				var MyFormData = new FormData();   // 先生成一个内置对象
				// 1. 先添加普通的键值
				MyFormData.append(''username'',''jason'');  // 添加了一组普通的键值对（多个）	
    
				// 2. 添加文件数据
				MyFormData.append(''myfile'',$(''#d2'')[0].files[0]);  // 如何获取input框中文件对象$(''#d1'')[0].files[0]
				$.ajax({
					url:'''',
					type:''post'',
					data:MyFormData,  
					// 发送文件必须要指定的两个参数
					contentType:false,  // 不适用任何编码 MyFormData对象内部自带编码 django后端能够识别  
					processData:false,  // 不要处理数据  

					success:function (data) {
						//返回事件

					}

序列化：

drf ：  django restframework 
-->前端想拿到由ORM得到的数据库里面的一个个用户对象，后端想直接将实例化出来的数据对象直接发送给客户端 , 便于前后端的数据交互 ----》 

from app01 import models
from django.core import serializers  #导入模块serializers
# 序列化目的  将数据整合成一个大字典形式 方便数据的交互

def ser(request):
    #拿到用户表里面的所有的用户对象
    user_list=models.User.objects.all()
    #导入内置序列化模块
    from django.core import serializers
    #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
    ret=serializers.serialize(''json'',user_list)
    return HttpResponse(ret)

dj django 与 ajax 交互

dj django 与 ajax 交互

Ajax 简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是 “异步 Javascript 和 XML”。即使用 Javascript 语言与服务器进行异步交互，传输的数据为 XML（当然，传输的数据不只是 XML, 现在更多使用 json 数据）。

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX 除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

 

优点：
  • AJAX 使用 Javascript 技术向服务器发送异步请求
  • AJAX 无须刷新整个页面

基于 jquery 的 Ajax 实现

<button class="send_Ajax">send_Ajax</button>
<script>
       $(".send_Ajax").click(function(){
           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"lewen",password:123},
               success:function(data){
                   console.log(data)
               },
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },
               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },
               statusCode: {
                    ''403'': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },
                    ''400'': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }
           })
       })

</script>

是

 

基于 Ajax 进行登录验证

$(".login_btn").click(function () {
        $.ajax({
            url: "/login/",
            type: "post",
            data: {
                "user": $("#user").val(),
                "pwd": $("#pwd").val(),
            },
            success: function (data) {
                console.log(data); // json字符串
                console.log(typeof data);
                var res = JSON.parse(data);// 反序列化 object {}
                console.log(res); // object
                console.log(typeof res);
                if (data.user) {
                    location.href = "http://127.0.0.1/index"
                } else {
                    $(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})
                }
            }
        })
    })

视图处理

def login(request):
    print(request.POST)
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")

    user = User.objects.filter(name=user, pwd=pwd).first()

    res = {"user": None, "msg": None}
    if user:
        res["user"] = user.name
    else:
        res["msg"] = "username or passwor wrong! "

    import json
    return HttpResponse(json.dumps(res))

image

文件上传

请求头 ContentType

ContentType 指的是请求体的编码类型，常见的类型共有 3 种：

1 application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

 

2 multipart/form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。

这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也只支持这两种方式（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。

随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利

3 application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

基于 form 表单的文件上传

模板部分
<form action="" method="post" enctype="multipart/form-data">
      用户名 <input type="text" name="user">
      头像 <input type="file" name="avatar">
    <input type="submit">
</form>
点击submit 后浏览器就直接提交
视图部分
def file_put(request):
    if request.method == "POST":
        print("body", request.body)  # 请求报文中的请求体
        print("POST", request.POST)  # if contentType==urlencoded ,request.POST才有数据

        print(request.FILES)
        file_obj = request.FILES.get("avatar")
        with open(file_obj.name, "wb") as f:
            for line in file_obj:
                f.write(line)

        return HttpResponse("OK")

    return render(request, "file_put.html")

基于 Ajax 的文件上传

模板

<form>
      用户名 <input type="text" id="user">
      头像 <input type="file" id="avatar">
     <input type="button" id="ajax-submit" value="ajax-submit">
</form>

<script>

    $("#ajax-submit").click(function(){
        var formdata=new FormData();
        formdata.append("user",$("#user").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);
        $.ajax({
            url:"",
            type:"post",
            data:formdata,
            processData: false ,    // 不处理数据
            contentType: false,    // 不设置内容类型
            success:function(data){
                console.log(data)
            }
        })
    })

</script>

将上传的头像封装到 formdata 里面

视图

def file_put(request):
    if request.method == "POST":
        print("body", request.body)  # 请求报文中的请求体
        print("POST", request.POST)  # if contentType==urlencoded ,request.POST才有数据

        print(request.FILES)
        file_obj = request.FILES.get("avatar")
        with open(file_obj.name, "wb") as f:
            for line in file_obj:
                f.write(line)

        return HttpResponse("OK")

    return render(request, "file_put.html")
$(".btn").click(function(){
        $.ajax({
            url:"",
            type:"post",
            contentType:"application/json",
            data:JSON.stringify({
                a:1,
                b:2
            }),
            success:function(data){
                console.log(data)
            }
        })
    });
ajax 传 json

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>

<h2>this is Index!</h2>

<button class="Ajax">Ajax</button>

<p class="content"></p>

<hr>
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret">
<button class="cal">计算</button>

<hr>

<form>
    用户名 <input type="text" id="user">
    密码 <input type="password" id="pwd">
    <input type="button" value="submit" class="login_btn"><span class="error"></span>
</form>

<script>

    $(".Ajax").click(function () {
        //发送Ajax请求
        $.ajax({
            url: "/test_ajax/",     // 请求url
            type: "get",  // 请求方式post
            data: {a: 1, b: 2},
            success: function (data) { // 回调函数
                console.log(data);
                $(".content").html(data)
            }
        })

    });

    // Ajax计算求值
    $(".cal").click(function () {
        $.ajax({
            url: "/cal/",
            type: "post",
            contentType: "multipart/form-data",
            data: {
                "n1": $("#num1").val(),
                "n2": $("#num2").val(),
            },
            success: function (data) {
                console.log(data);
                $("#ret").val(data);
            }
        })
    });

    // 登录验证
    $(".login_btn").click(function () {
        $.ajax({
            url: "/login/",
            type: "post",
            data: {
                "user": $("#user").val(),
                "pwd": $("#pwd").val(),
            },
            success: function (data) {
                console.log(data); // json字符串
                console.log(typeof data);
                var res = JSON.parse(data);// 反序列化 object {}
                console.log(res); // object
                console.log(typeof res);
                if (data.user) {
                    location.href = "http://127.0.0.1/index"
                } else {
                    $(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})
                }
            }
        })
    })

</script>


</body>
</html>
view all

Django - AJAX

Django - AJAX

一. JSON

　　什么是 json?

  • json 指的是 JavaScript 对象表示法 (JavaScript Object Notation)
  • json 是轻量级的文本数据交换格式
  • 独立于语言，支持不同的编程语言
  • 具有自我描述性，跟易理解

　　合格的 json 对象:

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]　

　　不合格的 json 对象:

{ 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;}  // 不能使用函数和日期对象
}

　　python 

　　　　　　数据类型：字符串，数字，布尔值，列表，字典，Null

　　　　　　序列化: Python 数据类型 --> json 字符串

　　　　　　　　　   json.dumps (Python 数据类型)　　json.dump (Python 数据类型，f）　　　　　　　　　

　　　　　　反序列化: json 字符串 -->Python 数据类型　　

　　　　　　　　　　json.loads (json 字符串)　　json.load (json 字符串，f)

　　前端

　　　　　　数据类型：字符串，数字，布尔值，数组，队象，null

　　　　　　序列化: JSON.stringgify (Js 的数据类型)

　　　　　　反序列化: JSON.parse (json 的字符串)

　　JsonResponse

　　　　　　from django.http import JsonResponse

　　　　　　JsonResponse (字典)

　　　　　　jsonResponse([], safe=False)

二. AJAX 简介　

AJAX（Asynchronous Javascript And XML）翻译成中文就是 “异步的 Javascript 和 XML”。即使用 Javascript 语言与服务器进行异步交互，传输的数据为 XML（当然，传输的数据不只是 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

示例

页面输入两个整数，通过 AJAX 传输到后端计算出结果并返回。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AJAX局部刷新实例</title>
</head>
<body>

<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1">

<script src="/static/jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })
</script>
</body>
</html>
HTML 
def ajax_demo1(request):
    return render(request, "ajax_demo1.html")


def ajax_add(request):
    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)
Views.py 
urlpatterns = [
    ...
    url(r''^ajax_add/'', views.ajax_add),
    url(r''^ajax_demo1/'', views.ajax_demo1),
    ...   
]
urls.py

 优点：

  • AJAX 使用 JavaScript 技术向服务器发送异步请求；
  • AJAX 请求无须刷新整个页面；
  • 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以 AJAX 性能高；

参数:

$.ajax({
    url: ''/ajax_test/'',    # 请求的地址
    type: ''post'',          # 请求的方式
    data: {                    # 请求的数据
        name: ''alex'',
        age: ''73'',
        hobby: JSON.stringify([''吃烧饼'', ''画大饼'', ''卖烧饼''])
    },
    success: function (res) {     # 正常响应的回调函数
        $(''[name="ii3"]'').val(res)
    },
    error:function (res) {         # 错误响应的回调函数
        console.log(res)
    }

三. jQuery 实现的 AJAX

　　最基本的 JQuery 发送请求示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ajax test</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="ajaxTest">AJAX 测试</button>
<script>
  $("#ajaxTest").click(function () {
    $.ajax({
      url: "/ajax_test/",
      type: "POST",
      data: {username: "Q1mi", password: 123456},
      success: function (data) {
        alert(data)
      }
    })
  })
</script>
</body>
</html>
jQuery 
def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    print(user_name, password)
    return HttpResponse("OK")
Views.py

　　data 参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })

四. JS 实现 AJAX

var b2 = document.getElementById("b2");
  b2.onclick = function () {
    // 原生JS
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("POST", "/ajax_test/", true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.send("username=q1mi&password=123456");
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        alert(xmlHttp.responseText);
      }
    };
  };　

五. AJAX 请求如何设置 csrf_token

　　方式一. 

　　通过获取隐藏的 input 标签中的 csrfmiddlewaretoken 值，放置在 data 中发送。

　　页面中使用 {% csrf_token %}, 给 POSt 提交数据中添加 csrfmiddlewaretoken 的键值对

#urls:
urlpatterns = [
    url(r''^admin/'', admin.site.urls),
    url(r''^index/'', views.index),
    url(r''^calc/'', views.calc),

#ajax:
$(''#b1'').click(function () {

        $.ajax({
            url: ''/calc/'',
            type: ''post'',
            data: {
                ''csrfmiddlewaretoken'': $(''[name="csrfmiddlewaretoken"]'').val(),
                i1: $(''[name="i1"]'').val(),
                i2: $(''[name="i2"]'').val()
            },
            success: function (res) {
                $(''[name="i3"]'').val(res)
            }
        })

#views

def calc(request):
    i1 = request.POST.get(''i1'', '''')
    i2 = request.POST.get(''i2'', '''')

    time.sleep(3)

    i3 = int(i1) + int(i2) if i1 and i2 else ''''
    return HttpResponse(i3)

    });
示例 
$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "Q1mi",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = ''csrfmiddlewaretoken'']").val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

　　方式二

　　通过获取返回 cookie 中的字符串 放置在请求头中发送

　　注意：需要引入一个 jquery.cookie.js 插件。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie(''csrftoken'')},  // 从Cookie取csrftoken，并设置到请求头中
  data: {"username": "Q1mi", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})
View Code

　　或者用自己写一个 getCookie 方法:

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '''') {
        var cookies = document.cookie.split('';'');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + ''='')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie(''csrftoken'');
View Code

　　还可以使用 $.ajaxSetup () 方法为 ajax 请求统一设置。

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});
View Code

　　注意:　

　　如果使用从 cookie 中取 csrftoken 的方式，需要确保 cookie 存在 csrftoken 值。

　　如果你的视图渲染的 HTML 文件中没有包含 {% csrf_token %}，Django 可能不会设置 CSRFtoken 的 cookie。

　　这个时候需要使用 ensure_csrf_cookie () 装饰器强制设置 Cookie。

django.views.decorators.csrf import ensure_csrf_cookie


@ensure_csrf_cookie
def login(request):
    pass

六. AJAX 上传文件

def upload(request):
    if request.is_ajax():
        file_obj = request.FILES.get(''f1'')
        with open(file_obj.name, ''wb'') as f:
            for i in file_obj.chunks():
                f.write(i)
        return HttpResponse(''上传成功'')

    return render(request, ''upload.html'')
View Code

　　html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" enctype="multipart/form-data"></form>
<input type="file" name="f1">
<button id="b1">上传</button>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $(''#b1'').click(function () {
        var form_obj = new FormData();
        form_obj.append(''f1'',$(''[name="f1"]'')[0].files[0])

        $.ajax({
            url:''/upload/'',
            type:''post'',
            processData:false,
            contentType:false,
            data:form_obj,
            success:function (res) {
                alert(res)
            }

        })


    })

</script>

</body>
</html>

 

关于django--ajax的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于64 Django -- Ajax、Ajax 与 Django、dj django 与 ajax 交互、Django - AJAX等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇Jacobian矩阵和Hessian矩阵（hesse矩阵和jacobi矩阵的区别）

下一篇java获取客户端的ip地址（java获取客户端的ip地址变成服务器地址）

相关文章