django ajax

时间 2019-11-08

标签 django ajax 栏目 Python 繁體版

原文原文链接

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

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

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

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

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

AJAX常见应用情景

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

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

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

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

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

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

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参数中的键值对，若是值值不为字符串，须要将其转换成字符串类型。cookie

$("#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请求如何设置csrf_token

方式1

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

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

方式2

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

经过获取返回的cookie中的字符串放置在请求头中发送。注意：须要引入一个jquery.cookie.js插件。

注意：

若是使用从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上传文件

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