Django学习笔记9

时间  2019-12-10
标签 django 学习 笔记 栏目 Python 繁體版
原文   原文链接

AJAX准备知识：JSON

JSON复习

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

json的具体操做能够看以往的文章html

AJAX简介

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

1. 咱们前端日后端发请求的方式：python

  • 直接在地址栏输入URL
  • a标签
  • form表单
  • AJAX

2. AJAX特色：jquery

  • 异步
  • 局部刷新（偷偷发请求）
  • 返回时是经过success中（data）来生效，在ajax请求时返回跳转是无效的

3. AJAX缺点：git

  • 请求零碎，滥用对服务端压力大

AJAX常见应用情景

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

还有一个很重要的应用场景就是注册时候的用户名的查重。ajax

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

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

       

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

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

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使用实例（Jquery）

将i1和i2两个文本框中的内容相加，点击提交，AJAX异步提交给服务器，而后返回和给i3编程

HTML部分代码

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

views.py

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

urls.py

urlpatterns = [
    ...
    url(r'^ajax_add/', views.ajax_add),
    url(r'^ajax_demo1/', views.ajax_demo1),
    ...   
]

AJAX请求如何设置csrf_token

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

首先在html文件的from表单中设置{% csrf_token %}，而后会在form表单中自动生成隐藏的input框，而后便可经过下面代码发送

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

文件上传

请求头ContentType

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

第一种：application/x-www-form-urlencoded

这应该是最多见的 POST 提交数据的方式了。浏览器的原生

表单，若是不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求相似于下面这样（无关的请求头在本文中都省略掉了）： 
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=yuan&age=22

第二种：multipart/form-data

这又是一个常见的 POST 数据提交的方式。咱们使用表单上传文件时，必须让

表单的 enctype 等于 multipart/form-dat。直接来看一个请求示例： 
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

　　这个例子稍微复杂点。首先生成了一个 boundary 用于分割不一样的字段，为了不与正文内容重复，boundary 很长很复杂。而后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构相似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，而后是回车，最后是字段具体内容（文本或二进制）。若是传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义，请前往 rfc1867 查看。

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

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，并且现阶段标准中原生

表单也只支持这两种方式（经过 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得很是少）。
随着愈来愈多的 Web 站点，尤为是 WebApp，所有使用 Ajax 进行数据交互以后，咱们彻底能够定义新的数据提交方式，给开发带来更多便利。

第三种：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>

视图部分

def index(request):
    print(request.body)   # 原始的请求体数据
    print(request.GET)    # GET请求数据
    print(request.POST)   # POST请求数据
    print(request.FILES)  # 上传的文件数据
    return render(request,"index.html")

AJAX上传文件

XMLHttpRequest 是一个浏览器接口，经过它，咱们可使得 Javascript 进行 HTTP (S) 通讯。XMLHttpRequest 在如今浏览器中是一种经常使用的先后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，固然最大的优点就是能够上传二进制文件。下面就具体

首先看一下formData的基本用法：FormData对象，能够把全部表单元素的name与value组成一个queryString，提交到后台。只须要把 form 表单做为参数传入 FormData 构造函数便可：

介绍一下如何利用 FormData 来上传文件。

// 上传文件示例
$("#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)
    }
  })
})

或者使用

var form = document.getElementById("form1");
var fd = new FormData(form);

　　这样也能够直接经过ajax 的 send() 方法将 fd 发送到后台。

检查浏览器的请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT

注意：因为 FormData 是 XMLHttpRequest Level 2 新增的接口，如今 低于IE10 的IE浏览器不支持 FormData。

Django内置的serializers

将query_set类型数据转化为你想要的数据类型传给前端

from django.core import 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插件示例

 

点击下载Bootstrap-sweetalert项目。

$(".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教程