day70-Django进阶-Ajax技术的使用
原创
1.Ajax使用方法第一种
2.Ajax使用方式第二种
3.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);
}
}
});
4.上传文件
模板中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>index</title>
{% load static %}
</head>
<h1>提交ajax文件</h1>
<input type="file" id="my_file">
<button id="sum">上传</button>
<body>
<script src="{% static 'jquery-3.3.1.js' %}"></script>
<script src="{% static 'ajax_setup.js' %}"></script>
<script>
$('#sum').click(
function(){
var form_obj = new FormData();
{#jQuery对象转化为DOM对象[0]#}
form_obj.append('f', $('#my_file')[0].files[0]);
$.ajax({
url: '/index/',
type: 'post',
data: form_obj,
processData: false,
contentType: false,
success: function(res){
console.log(res)
}
})
}
)
</script>
</body>
</html>视图中
from django.shortcuts import render, HttpResponse
from django.views.decorators.csrf import ensure_csrf_cookie
@ensure_csrf_cookie
def index(request):
if request.is_ajax():
file_obj = request.FILES.get('f')
with open(file_obj.name, 'wb') as f:
for i in file_obj.chunks():
f.write(i)
return HttpResponse('文件上传成功！')
return render(request, 'index.html')原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
