django AJAX 的应用

时间  2019-11-26
标签 django ajax 应用 栏目 Python 繁體版
原文   原文链接

目录javascript

AJAX 的使用

AJAX简介

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

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

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

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

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


#就是使用js的技术发请求和接收响应的。
AJAX特色：
1. 异步
2. 局部刷新
3. 传输的数据量少
  • 页面输入两个整数，经过AJAX传输到后端计算出结果并返回。
  • views.py文件
from django.shortcuts import render
from django.http import JsonResponse

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)
  • urls.py
from django.conf.urls import url
from app01 import views

urlpatterns = [
    ...
    url(r'^ajax_add/', views.ajax_add),
    url(r'^ajax_demo1/', views.ajax_demo1),
    ...   
]
  • views.ajax_demo1.heml
<!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.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>

AJAX常见应用情景

搜索引擎根据用户输入的关键字，自动提示检索关键字。
还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，
而后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展现出来。

- 整个过程当中页面没有刷新，只是刷新页面中的局部位置而已！
- 当请求发出后，浏览器还能够进行其余操做，无需等待服务器的响应！

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

整个过程当中页面没有刷新，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就能够进行其余操做；

AJAX的优缺点

  • 优势：

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

jQuery实现的AJAX

  • 最基本的jQuery发送AJAX请求示例：

<!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>

  • views.py

def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    print(user_name, password)
    return HttpResponse("OK")

  • $.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);
      }
    })
  })

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

  • jqery发ajax请求

/* jq发ajax 
导入jq
$.ajax({
        url：发送的地址，
        type:   请求方式，
        data:  {},   
        successs: funcation(res){    res  ——>响应体
        }
}) */

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

AJAX请求如何设置csrf_token

  • 方式1 经过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。

//前提条件：确保有csrftoken的cookie
//在页面中使用{% csrf_token %}
//加装饰器 ensure_csrf_cookie
//from django.views.decorators.csrf import csrf_exempt,csrf_protect,  ensure_csrf_cookie

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

  • 方式2 经过获取返回的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);
  }
})
  • 或者用本身写一个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');
  • 每一次都这么写太麻烦了，可使用$.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);
    }
  }
});

  • 注意：

"""
若是使用从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

Form表单上传文件

#html
<form action="/upload/" method="post" enctype="multipart/form-data"> 
  {% csrf_token %}
  头像: <input type="file" name="head-pic">
  用户名: <input type="text" name="username">
  <input type="submit">
</form>

#视图函数
def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        print(request.POST)  #拿到的是post请求的数据,可是文件相关数据须要用request.FILES去拿
        print(request.FILES) #<MultiValueDict: {'head-pic': [<InMemoryUploadedFile: 1.png (image/png)>]}>
        file_obj = request.FILES.get('head-pic')
        print(file_obj)
        file_name = file_obj.name
        # f = open('xx.txt','rb')
        # with open('xx.txt','wb') as f2:
        #     for i in f:
        #         f2.write(i)
        import os
        path = os.path.join(settings.BASE_DIR,'statics','img',file_name)
        with open(path,'wb') as f:
            for i in file_obj:
                f.write(i)
            #for chunk in  file_obj.chunks():
            #    f.write(chunk)
        return HttpResponse('ok')

AJAX上传文件

/*
上传文件
var   formobj  = new FormData()
formobj.append(key,  $("#f1")[0].files[0] )
$.ajax({
        url：发送的地址，
        type:   请求方式，
        processData: false;    // 不处理编码方式
        contentType:false;    //  不处理请求头
        data: formobj ,   
        successs: funcation(res){    res  ——>响应体}
})
*/

// 上传文件示例一
$("#b3").click(function () {
  var formData = new FormData();
  formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
  formData.append("f1", $("#f1")[0].files[0]);
  $.ajax({
    url: "/upload/",
    type: "POST",
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
    data: formData,
    success:function (data) {
      console.log(data)
    }
  })
})


// 上传文件示例二
<input type="file" id="f1">
<button id="b1">上传 </button>


$('#b1').click(function () {
        var  formobj =  new FormData();

        formobj.append('file',document.getElementById('f1').files[0]);
        // formobj.append('file',$('#f1')[0].files[0]);
        formobj.append('name','alex');

        $.ajax({
            url: '/upload/',
            type: 'post',
            data:formobj ,
            processData:false,  // 
            contentType:false,
            success: function (res) {
                $("[name='i3']").val(res)
            },
        })
    })

  • 练习（用户名是否已被注册）

- 功能介绍
- 在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。
- #### 案例分析
- 页面中给出注册表单；
- 在username input标签中绑定onblur事件处理函数。
- 当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
- django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，若是被注册了就返回“该用户已被注册”，
不然响应“该用户名能够注册”。

  • 解题流程

  • urls.py
from app01 import views
from django.conf.urls import url

urlpatterns = [
    url(r'^login/', views.login),           #登陆测试页面路由
    url(r'^check_user/', views.check_user), #响应AJAX函数路由
]
  • models.py
from django.db import models
"""
简单建立一个用户帐户信息,用于测试
"""
class User(models.Model):
    username = models.CharField(max_length=32, unique=True)
    pwd = models.CharField(max_length=32, unique=True)
  • views.py 视图函数
from app01 import models
from django.shortcuts import render
from django.http import JsonResponse

def login(request):
    return render(request, "login.html")#简单的展现一个登录页面

def check_user(request):  #用来处理AJAX请求
    user = request.GET.get("user")  #获取AJAX get请求的里的user的值
    if models.User.objects.filter(username=user).exists():#判断user的值是否在数据库username字段的值里
        return JsonResponse({'status': 1, 'msg': '用户名已存在'})#若是存在返回用户名已存在的提示信息
    else:
        return JsonResponse({'status': 0, 'msg': '用户名可使用'})#不然存在返回用户名可使用的提示信息
  • html 页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
</head>
<body>
    {% csrf_token %}
    <p>
        注册帐户<input type="text" id="user"><span id = "s1"></span>
    </p>
    <p>
        注册密码<input type="text">
    </p>
    <input type="submit">
    <script src = '/static/jquery.js'></script>
    <script>
         $("#user").blur(function(){
         var user = $(this).val();
         $.ajax({
             url:'/check_user/',
             type:'get',
             data:{
                 'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
                 user:$('#user').val()
             },
             success:function (res) {
                 $('#s1').text(res.msg)
             }
         })
});
    </script>
</body>
</html>
  • 用户名已存在 执行效果

  • 用户可使用 执行效果

JSON

  • 什么是JSON
#在python中来讲 json是一个特殊的字符串。 【长的像列表/字典/字符串/数字/真假】
- 用于语言之间的数据转换
- 给出 序列化 / 收入 反序列化  

#广义的来讲
SON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式 具备自我描述性，更易理解
JSON 使用 JavaScript 语法来描述数据对象，可是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不一样的编程语言。


一种数据交换的格式
python

支持的数据类型：字符串、数字、列表、字典、布尔值、None

转化：序列化   josn.dumps(python的数据)      josn.dump(python的数据,f)    

          反序列化   josn.loads(json的字符串)      josn.load(json的字符串,f)

js

支持的数据类型：字符串、数字、数组、对象、布尔值、null

转化：

序列化：JSON.stringfy(js的数据类型)

反序列化：JSON.parse(json的字符串
                
#小知识                
django 中使用 'from django.http.response import JsonResponse' 前端页面会识别,而且反序列化

  • 合格的json对象

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]　
#外层必须是列表或字典
#json内部包含字符串必需要用双引号 ""
#外部''

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

  • Jstringify与parse方法 JavaScript中关于JSON对象和字符串转换的两个方法：

  • JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象　

JSON.parse('{"name":"alex"}');
JSON.parse('{name:"alex"}') ;      // 错误
JSON.parse('[18,undefined]') ;     // 错误

  • JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。　

JSON.stringify({"name":"alex"})

  • 简单了解XML

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。

JSON 格式有两个显著的优势：书写简单，一目了然；符合 JavaScript 原生语法，能够由解释引擎直接处理，
不用另外添加解析代码。因此，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。

XML和JSON都使用结构化方法来标记数据
#XML
<country>
    <name>中国</name>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
</country>
#JSON
{
    "name": "中国",
    "province": [ {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }]
}
#由上面的两端代码能够看出，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，而且在数据交换方面，
因为 JSON 所使用的字符要比 XML 少得多，能够大大得节约传输数据所占用得带宽。

Json 序列化时间日期类型的数据的方法

import json
from datetime import datetime
from datetime import date
#对含有日期格式数据的json数据进行转换
class JsonCustomEncoder(json.JSONEncoder):
    def default(self, field):
        if isinstance(field,datetime):
            return field.strftime('%Y-%m-%d %H:%M:%S')
        elif isinstance(field,date):
            return field.strftime('%Y-%m-%d')
        else:
            return json.JSONEncoder.default(self,field)
d1 = datetime.now()
dd = json.dumps(d1,cls=JsonCustomEncoder)
print(dd)

JsonResponse

def index(request):
    d1 = {'name':'gkf'}
    import json
    return HttpResponse(json.dumps(d1))  -- success:function(res){ var a = JSON.parse(res) }
    return HttpResponse(json.dumps(d1),content-type='application/json') --success:function(res){res--自定义对象,不须要本身在反序列化了}
    return JsonResponse(d1)
    d1 = [11,22]  #非字典类型的数据都须要加safe=False
    return JsonResponse(d1,safe=False)

Django内置的 serializers 序列化

def books_json(request):
    book_list = models.Book.objects.all()[0:10]
    from django.core import serializers
    ret = serializers.serialize("json", book_list)
    return HttpResponse(ret)

SweetAlert 结合 AJAX简单使用

<script src="/static/sweetalert.min.js"></script>
<script>
    $('.btn-danger').click(function () {
        swal({
            title: "确认删除吗?",
            text: "一旦删除，将没法恢复!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        url: '/del_publisher/' + $(this).attr('del_id') + '/',
                        success: (res) => {
                            if (res.status === 0) {
                                $(this).parent().parent().remove();
                                swal("删除成功", {
                                    icon: "success",
                                });
                            }
                        }
                    });
                } else {
                    swal("已取消删除");
                }
            });
    })
</script>
  • view.py 视图函数
from app01 import models
from django.http.response import JsonResponse

def delete(request,table,pk):
    if hasattr(models,table.capitalize()):
        table_class = getattr(models,table.capitalize())
        table_class.objects.filter(pk=pk).delete()
        return JsonResponse({'status':0})
    else:
        return JsonResponse({'status':1})
  • models.py 表结构
from django.db import models

#出版社
class Publisher(models.Model):
    pid = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32, unique=True)

  • 成功删除 效果演示(数据库也删除此条数据)

  • 取消删除 效果演示

$(".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) {
          if (data.status === 1) {
            swal("删除成功!", "你能够准备跑路了！", "success");
          } else {
            swal("删除失败", "你能够再尝试一下！", "error")
          }
        }
      })
    });
})
做 者： 郭楷丰
声援博主：若是您以为文章对您有帮助，能够点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力！
自 勉：生活，须要追求；梦想，须要坚持；生命，须要珍惜；但人生的路上，更须要坚强。 带着感恩的心启程，学会爱，爱父母，爱本身，爱朋友，爱他人。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程