Django使用Ajax

Django中使用Ajax

一、Ajax的应用:

• 异步提交：
  同步异步：描述任务的提交方式
  同步：提交任务之后，等待任务的返回结果，期间不干其他事
  异步：提交任务之后，不等待返回结果，直接执行后面的步骤，任务的返回通过 回调机制
  阻塞非阻塞：程序的运行状态
  程序运行的三状态图
• 局部刷新
  一个页面，不是整体刷新而是页面的某个地方局部刷新

Ajax是一门js的技术，基于原生js开发。

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

示例：

<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p><button id="b1">计算</button></p>

$('#b1').on('click', function(){
// 朝后端提交post数据
	$.ajax({
		// 1.到底朝后端哪个地址发数据
		url:'', // 专门用来控制朝后端提交数据的地址
		// 2.到底发送什么请求
		type:'post', // 专门指定ajax发送的请求方式
		// 3.发送的数据到底是什么
		data:{'t1':$(#t1).val(), 't2':$('#t2').val()},
		// 4.异步提交的任务需要通过回调函数来处理
		success:function(data){  // data形参指代的就是异步提交的返回结果
			// 通过DOM操作将内容 渲染到标签内容上
			$('#t3').val(data)
		}
	})
})

二、Ajax传json格式数据

Django后端针对json格式的数据，不会自动解析，会原封不动的放到request.body中。

# views.py
def xxx(request):
    ...
    json_bytes = request.body
    json_str = json_bytes.decode()
	json_dict = json.loads(json_str)
    ...

前端用ajax发送json'数据

$('#b1').on('click', function(){
	$.ajax({
		url:'', 
		type:'post', 
		// 1.指定contenttype参数
		contentType:'application/json',
		// 2.确保发送的数据是json格式的
		data:JSON.stringify({'t1':$('#t1').val(), 't2':$('#t2').val()}),
		success:function(data){  
			$('#t3').val(data)
		}
	})
})

三、Ajax发送文件

发送文件需要利用内置对象 Formdata

该对象既可以传普通的键值 也可以传文件

# 获取input获取用户上传文件的内容
// 1.先通过jquery查找到该标签
// 2.将jquery对象转换成原生的js对象
// 3.利用原生js对象的方法，直接获取文件内容

$('#b1').click(function(){
    // 1.先生成一个formdata对象
    var myFormData = new FormData();
    // 2.朝对象中添加普通的键值
    myFormData.append('username', $('#t1').val());
    myFormData.append('password', $('#t2').val()):
    // 3.朝对象中添加文件数据
	myFormData.append('myfile', $('#t3')[0].files[0]);
    $.ajax({
        url:'',
        type:'post',
        data:myFormData, // 直接丢对象
		// ajax传文件，一定要指定两个关键性的参数
        contentType:false, // 不用任何编码，因为formdata对象自带编码
        processData:false, // 告诉浏览器不要处理该数据
        
        success:function(data){
            alert(data)
        }
    })
})

ajax传文件需要注意的事项：

1.利用Formdata对象，能够简单的快速传输数据(普通键值 + 文件)

2.有几个参数

• data:Formdata对象
• contentType:false
• processType:false

四、Ajax请求如何设置csrf_token

在Django中只要是POST请求，都必须要校验csrf_token来防伪跨站请求。

方式一：

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

方式二：

在Django的静态文件中新建一个js文件然后在使用Ajax页面引入即可
js文件代码如下：

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