Django Ajax

1. AJAX简介

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

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

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

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

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

ajax提交数据页面不用刷新，原始数据还在，处理数据的过程中不影响页面其他操作
form表单提交数据页面刷新，原始数据不在，并且处理数据的过程中无法做其他操作
Ajax还可以和form组件一起使用

2. AJAX常见应用情景

例如注册时候的用户名的查重。

这里就使用了AJAX技术，当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果
响应给浏览器，最后再把后端返回的结果展示出来。整个过程中页面没有刷新，只是刷新页面中的局部位置而已，且当请求发
出后，浏览器还可以进行其他操作，无需等待服务器的响应

3. AJAX 简易使用

		
		{#csrf#}
		$.ajaxSetup({
		            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
		        })
        $('#btn').click(function () {
            let book_title = $('#book_title').val();
            let book_price = $('#book_price').val();
            let authors_name = $('#authors_name').val();
            let publish_name = $('#publish_name').val();
            let publish_time = $('#publish_time').val();
            //$.ajax为固定用法，表示启用ajax
            $.ajax({
            	//url后面跟的是ajax提交数据的路径，不写就是向当前路径提交
                url: '', 
                //type用于指定ajax请求的方法
                type: 'post', 
                ContentType: 'application/x-www-form-urlencoded',
                //data后面的数据就是提交给后端的数据
                data: {
                    'book_title': book_title,
                    'book_price': book_price,
                    'authors_name': authors_name,
                    'publish_name': publish_name,
                    'publish_time': publish_time,
                },  // 请求携带的数据
                //success为回调函数，参数args为后端给你返回的数据
                success: function (args) {  // 异步回调函数 后端有回复自动触发
                    {#window.location.assign("{% url 'book' %}")#}
                    alert(123)
                }
            })
        })

后端判断Ajax请求

request.is_ajax() 方法可以用于判断是否为Ajax请求

4. 前后端传输数据编码格式

"""
请求体中携带编码格式
	Content-Type:...
django针对不同编码方式对应的数据格式会采用不同的处理策略
"""
form表单默认发送的编码格式
		Content-Type: application/x-www-form-urlencoded
		数据格式:username=xxx&password=123
		django后端会自动处理到:request.POST
form表单发送文件
		Content-Type: multipart/form-data
		数据格式:隐藏不让看
		django后端会自动处理:request.POST  request.FILES
ajax默认的编码格式
		Content-Type: application/x-www-form-urlencoded
		数据格式:username=xxx&password=123
		django后端会自动处理到:request.POST

5. Ajax发送json格式数据

# form表单是无法发送json格式数据的!!!
ajax发送的数据类型一定要跟数据的编码格式一致 
    编码格式是urlencoded 
    数据格式就应该是username=xxx&password=123
    不能发送json格式数据
"""
django后端针对json格式的数据不会做任何的处理 就在request.body内
需要我们自行处理
"""
$('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',  // 不写默认也是get请求
            contentType:'application/json',  // 不写默认是urlencoded编码
            data:JSON.stringify({'name':'xxx','pwd':123}),  // 序列化方法
            success:function (args) {
            }
        })
    })

6. Django自带的序列化组件

from app01 import models
from django.http import JsonResponse
from django.core import serializers
def d_data(request):
    # 前后端分离之后 django orm产生的queryset无法直接被前端识别 还是需要json格式数据(硬通货)
    # data_list = []  # [{}, {}, {}]
    # user_queryset = models.User.objects.all()
    # for user_obj in user_queryset:
    #     data_list.append({
    #         'pk':user_obj.pk,
    #         'name':user_obj.name,
    #         'age':user_obj.age,
    #         'gender':user_obj.gender,
    #         'gender_real':user_obj.get_gender_display(),
    #         'addr':user_obj.addr
    #     })
    # return JsonResponse(data_list,safe=False)
    user_queryset = models.User.objects.all()
    ret = serializers.serialize('json', user_queryset)
    return HttpResponse(ret)

7. Ajax携带文件数据

$("#d1").click(function () {
        // 需要利用内置js内置对象FormData
        let myFormData = new FormData();
        // 对象添加普通数据
        myFormData.append('username',$('#name').val())
        myFormData.append('password',$('#pwd').val())
        // 对象添加文件数据
        myFormData.append('my_file',$('#file')[0].files[0])
        // 发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormData,
            // 携带文件必须要指定的两个参数
            contentType:false,
            processData:false,
            success:function (args) {
                // 处理异步回调返回的结果
            }
        })
    })

8. Ajax 删除局部刷新

在删除数据库数据时，可以在前端将其数据记录删除即可。

$('#'+del_id).remove()		# 将指定id的记录在前端删除

9. AJAX请求如何设置 csrf_token

不只是ajax，只要是向Django提交post请求的数据，都必须校验csrf_token来防伪跨站请求，那么在ajax中如何让使用csrf_token呢，毕竟又不像form表单那样可以在表单内部使用一句模版语法 {% csrf_token %} 即可

方式一

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

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

方式二

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

	$.ajax({
	  url: "/cookie_ajax/",
	  type: "POST",
	  // 从Cookie取csrf_token，并设置ajax请求头
	  headers: {"X-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({
			     data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
			})