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