python--Django 11 Django框架 Ajax

思考：Ajax是什么? 应用场景是什么?

ajax是一个与服务器进行交互的技术。
 特点：异步  不刷新页面  数据量小 

本节涉及的ajax文件上传以及登录跳转项目实例获取   >>> 点击

AJAX准备知识：JSON和XML

JSON

json详细学习 >>> 点击

• SON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式
• JSON 独立于语言 *
• JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

 JSON和python与JavaScript之间的数据转化关系：

序列化: 其他格式变为json格式称为序列化, 反之为反序列化. 

文件操作:

• json.dump(python的数据类型,f)
• json.load(json字符串,f)

JsonResponse({})

 JsonResponse([ ],safe=False)

XML

xml详细学习 >>> 点击

• XML 指可扩展标记语言（eXtensible Markup Language）。
• XML 被设计用来传输和存储数据

JSON和XML的比较

JSON 与 XML 的相同之处：

• JSON 和 XML 数据都是 "自我描述" ，都易于理解。
• JSON 和 XML 数据都是有层次的结构
• JSON 和 XML 数据可以被大多数编程语言使用

JSON 与 XML 的不同之处：

• JSON 不需要结束标签
• JSON 更加简短
• JSON 读写速度更快
• JSON 可以使用数组

最大的不同是：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。

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

为什么 JSON 比 XML 更好？

• XML 比 JSON 更难解析。
• JSON 可以直接使用现有的 JavaScript 对象解析。
• 针对 AJAX 应用，JSON 比 XML 数据加载更快，而且更简单：
  • 使用 XML
    • 获取 XML 文档
    • 使用 XML DOM 迭代循环文档
    • 接数据解析出来复制给变量
  • 使用 JSON
    • 获取 JSON 字符串
    • JSON.Parse 解析 JSON 字符串

*因为针对 AJAX 应用，JSON 比 XML 数据加载更快，而且更简单，因此我们在后面的ajax学习中使用JSON进行存储和交换文本信息。

AJAX简介

AJAX详细学习  >>> 点击

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

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

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

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

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

jQuery实现的AJAX

 $('#b1').click(function () {
	$.ajax({
		url: '/calc/',             # url地址
		type: 'post',			   # 请求方式 
		data: {                    # 发送的数据  
			i1: $('[name="i1"]').val(),
			i2: $('[name="i2"]').val()
            # 传个列表  进行序列化. 在py文件中json.load()即可变为列表
			hobby:JSON.stringify(['游泳','阅读','跑步'])	
		},
		success: function (res) {         # 回调函数   成功时调用  res 返回的内容
			console.log(res);
			$('[name="i3"]').val(res)

		}, error: function (res) {        # 回调函数  失败时调用


		console.log('这是错误的')
		console.log(res)
	}
		
	})
});
	

 

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与服务器的交互关系

ajax发post请求 通过CSRF验证的方法

1. 方法一：HTML文件中使用{% csrf_token %}且通过data传csrfmiddlewaretoken给服务器

  

 {% csrf_token %}
    $('#b1').click(function () {
        $.ajax({
            url: '/csrf_test/',
            type: 'post',
            data: {
                csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),  # 通过data传csrfmiddlewaretoken给服务器
                name: 'alex',
                age: '73',
            },
            success: function (res) {
                console.log(res);
            }
        })
    });

 

    
2. 方法二：通过请求头传csrfmiddlewaretoken给服务器

    

$('#b1').click(function () {
        $.ajax({
            url: '/csrf_test/',
            type: 'post',
            headers: {"X-CSRFToken": $('[name="csrfmiddlewaretoken"]').val()},    # 通过请求头传csrfmiddlewaretoken给服务器
            data: {
                name: 'alex',
                age: '73',

            },
            success: function (res) {
                console.log(res);
            }
        })
    });

 

    
3. 方法三：全局的设置  以上方法一和二仅对当前Ajax请求有效,但是不能影响全局
    可以设置ajax静态文件引入到HTML文件中

设置ajax静态文件

 ajax静态文件写法:

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

 

AJAX上传文件 

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

首先看一下formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

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

 

ajax文件上传示例:  项目实例获取 >>> 点击

// ajax上传文件示例:

//html部分内容
$("#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)
    }
  })
})

//views.py内容:
from django.shortcuts import render, HttpResponse

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

普通文件上传:  项目实例获取 >>> 点击

 

注意：由于 FormData 是 XMLHttpRequest Level 2 新增的接口，现在 低于IE10 的IE浏览器不支持 FormData。

SweetAlert插件示例

SweetAlert是一个JS插件,会使弹出消息变得简单而美观。

SweetAlert插件官网 >>> 点击

 

浏览器向服务器发请求的方式总结

 当前我们已知的浏览器向服务器发请求的形式有以下四种：

1. 在浏览器的地址栏中输入URL  回车            ——》 GET请求

2. form表单发请求                                              ——》 GET/POST请求
    action         ——》   提交的地址 
    method      ——》   请求方式    GET/POST
    input标签要有name属性，

   此外还要有一个类型是submit的input标签   或者  button按钮 作为提交
    
3. a标签                                                                ——》 GET请求

4. Ajax                                                                  ——》 GET/POST请求
        Ajax是一个与服务器交互的技术，使用了JS技术。
        特点： 异步   不刷新页面  数据量小

如何使用JQ发送ajax请求：
        

导入JQ
       
        $.ajax({
            url: 发送的地址，
            type: 'post',
            data:{
                k1:v1,
                k2:v2,
            },
            success:function(res){   # res  返回的响应的响应体 
            
            }，
            error:function(res){   # res  返回的响应的响应体 
            
            }
        })