Django如何与Ajax交互
作者:大江狗 发布时间:2023-05-09 12:53:11
目录
前后端传输数据的编码格式
Ajax提交urlencoded格式数据
Ajax通过FormData上传文件
Ajax提交Json格式数据
Ajax发送POST请求时如何通过CSRF认证
Django Ajax案例1:联动下例菜单
Django Ajax案例2:Ajax上传文件
前后端传输数据的编码格式
前后端传输数据的编码格式主要有三种, 本文接下来将详细演示。
urlencoded
formdata
json
Ajax提交urlencoded格式数据
Ajax给后台发送数据的默认编码格式是urlencoded,比如username=abcde&password=123456的形式。Django后端拿到符合urlencoded编码格式的数据都会自动帮你解析分装到request.POST中,与form表单提交的数据相同。
下面两种方式是等同的。
//手动构造数据data
$("#btnSubmit").click(function () {
$.ajax({
url: '/auth/', //也可以反向解析{% url 'login' %}
type: 'post',
data: {
'username': $("#id_username").val(),
'password': $('#id_password').val()
},
success: function (data){
}
});
};
// .serialize() 方法可将<input>, <textarea> 以及 <select>表单序列化
// 成urlencoded格式数据
$("#btnSubmit").click(function () {
let data = $("#loginForm").serialize();
$.ajax({
url: "/auth/", //别忘了加斜杠
type: $("#loginForm").attr('method'),
data: data,
success: function (data) {
}
});
});
Ajax通过FormData上传文件
Ajax上传文件需要借助于js内置对象FormData,另外上传文件时表单千万别忘了加enctype="multipart/form-data"属性。
//案例1,点击submi上传文件
$("#submitFile").click(function () {
let formData = new FormData($("#upload-form"));
$.ajax({
url:"/upload/",//也可以写{% url 'upload' %}
type:"post",
data:formData,
//这两个要必须写
processData:false, //不预处理数据 因为FormData 已经做了
contentType:false, //不指定编码了 因为FormData 已经做了
success:function(data){
console.log(data);
}
});
});
//案例2,同时上传文件并提交其它数据
$("#submitFile").click(function () {
//js取到文件
let myfile = $("#id_file")[0].files[0];
//生成一个FormData对象
let formdata = new FormData();
//加值
formdata.append('name', $("#id_name").val());
//加文件
formdata.append('myfile', myfile);
$.ajax({
url: '/upload/', //url别忘了加/杠
type: 'post',
//这两个要必须写
processData:false, //不预处理数据 因为FormData 已经做了
contentType:false, //不指定编码了 因为FormData 已经做了
data: formdata,
success: function (data) {
console.log(data);
}
});
});
Ajax提交Json格式数据
前后端传输数据的时候一定要确保声明的编码格式跟数据真正的格式是一致的。如果你通过Ajax发送Json格式数据给Django后端,请一定注意以下三点:
contentType参数指定成application/json;
数据是真正的json格式数据;
Django后端不会帮你处理json格式数据需要你自己去request.body获取并处理。
$("#submitBtn").click(function () {
var data_obj={'name':'abcdef','password':123456};//Javascript对象
$.ajax({
url:'',
type:'post',
contentType:'application/json', //一定要指定格式 contentType
data:JSON.stringify(data_obj), //转换成json字符串格式
success:function (data) {
console.log(data)
}
});
});
Ajax发送POST请求时如何通过CSRF认证
// 第一种方式直接在发送数据中加入csrfmiddlewaretoken
$("#btn").on("click",function () {
$.ajax({
url:"/some_url/",
type:"POST",
data:{
csrfmiddlewaretoken: {{ csrf_token }}, //写在模板中,才会被渲染
},
success:function (data) {
}
});
});
//通过jquery选择器获取csrfmiddlewaretoken
$("#btn").on("click",function () {
$.ajax({
url:"/some_url/",
type:"POST",
data:{
csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),
},
success:function (data) {
}
});
});
//使用jquery.cookie.js调用请求头cookie中的csrftoken
<script src="/static/jquery.cookie.js">
<script>
$("#btn").on("click",function () {
$.ajax({
url:"/some_url/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:$("#form1").serialize()
});
})
</script>
Django Ajax案例1:联动下例菜单
联动下拉菜单是Web开发中一个被经常使用的应用。比如当你从一个列表从选择一个国家的时候,联动下拉菜单会同步显示属于该国家所有城市列表供用户选择。今天我们就教你如何使用Django+Ajax生成联动下拉菜单。
我们的模型如下所示:
class Country(models.Model):
name = models.CharField(verbose_name="国家", max_length=50)
def __str__(self):
return self.name
class City(models.Model):
name = models.CharField(verbose_name="城市", max_length=50)
country = models.ForeignKey(Country, on_delete=models.CASCADE, verbose_name="国家",)
def __str__(self):
return self.name
我们的模板如下所示,表单中对应国家和城市下拉菜单的DOM元素id分别为id_country和id_city。当用户选择国家后,ajax会携带国家的id值向后台发送请求获得当前国家的所有城市清单,并在前端渲染显示。
{% block content %}
<h2>创建用户 - 联动下拉菜单</h2>
<form method="post" class="form-horizontal" role='form' action="">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$("#id_country").change(function() {
var country_id = $(this).val();
$.ajax({
url: '/ajax/load_cities/',
data: {
'country_id': country_id
},
type: 'GET',
dataType: 'json',
success: function (data) {
var content='';
$.each(data, function(i, item){
content+='<option value='+item.id+'>'+item.name+'</option>'
});
$('#id_city').html(content)
},
});
});
</script>
Django负责处理视图Ajax请求的视图函数如下所示:
def ajax_load_cities(request):
if request.method == 'GET':
country_id = request.GET.get('country_id', None)
if country_id:
data = list(City.objects.filter(country_id=country_id).values("id", "name"))
return JsonResponse(data, safe=False)
Django Ajax案例2:Ajax上传文件
前端模板及js文件如下所示, 请注意我们是如何在表单中加入了enctype属性,如何使用FormData上传文件,并解决了csrftoken问题的。
{% block content %}
<form action="" method="post" enctype="multipart/form-data" id="form">
<ul class="errorlist"></ul>
{% csrf_token %}
{{ form.as_p }}
<input type="button" class="btn btn-info form-control" value="submit" id="btn" />
</form>
<table class="table table-striped" id="result">
</table>
{% endblock %}
{% block js %}
<script src=" https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js ">
</script>
<script>
var csrftoken = $.cookie('csrftoken');
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(document).ready(function(){
$('#btn').click(function(e){
e.preventDefault();
// 构建FormData对象
var form_data = new FormData();
form_data.append('file', $('#id_file')[0].files[0]);
$.ajax({
url: '/file/ajax_upload/',
data: form_data,
type: 'POST',
dataType: 'json',
// 告诉jQuery不要去处理发送的数据, 发送对象。
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
// 获取POST所需的csrftoken
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}},
success: function (data) {
if(data['error_msg']) {
var content = '<li>'+ data['error_msg'] + '</li>';
$('ul.errorlist').html(content);
}
else
{
var content= '<thead><tr>' +
'<th>Name and URL</th>' +
'<th>Size</th>' +
'</tr></thead><tbody>';
$.each(data, function(i, item) {
content = content +
'<tr><td>' +
"<a href= ' " +
item['url'] +
" '> " +
item['url'] +
'</a></td><td>' +
item['size'] +
'</td><td><tr>'
});
content = content + "</tbody>";
$('#result').html(content);
}
},
});
});
});
</script>
{% endblock %}
Django负责处理视图Ajax请求的视图函数如下所示:
# handling AJAX requests
def ajax_upload(request):
if request.method == "POST":
form = FileUploadModelForm(data=request.POST, files=request.FILES)
if form.is_valid():
form.save()
# Obtain the latest file list
files = File.objects.all().order_by('-id')
data = []
for file in files:
data.append({
"url": file.file.url,
"size": filesizeformat(file.file.size),
})
return JsonResponse(data, safe=False)
else:
data = {'error_msg': "Only jpg, pdf and xlsx files are allowed."}
return JsonResponse(data)
return JsonResponse({'error_msg': 'only POST method accpeted.'})
来源:https://pythondjango.cn/django/basics/16-django-ajax/
猜你喜欢
- 相信现在很多人都喜欢玩王者荣耀这款手游,里面好看的皮肤令人爱不释手。那么你有没有想过把王者荣耀高清皮肤设置为壁纸,像下面这样今天就来教大家如
- SQL Server中事务日志的作用:持续记录数据库所有的事务和这些事务对数据库所做的修改;一旦数据库出现灾难事件,就需要事务日志来进行近期
- 用下列方法可以做到: main.htm<html><body><form action="
- 今天我去隽辰的博客去看他的文章,在读完他的文章之后,我很自然的就去读网友们给他留的评论,在读的时候我发现他的评论是顺序的,也就是最早的评论在
- 从AspJpeg1.8 版本开始,AspJpeg 提供了比 PrintText 更为灵活的文本绘图方法PrintTextEx,PrintTe
- 本文实例讲述了Go语言实现的web爬虫方法。分享给大家供大家参考。具体分析如下:这里使用 Go 的并发特性来并行执行 web 爬虫。修改 C
- 阅读是在网站中的一个很重要的部分,可以说是网站的核心。网站最终要呈现给用户的就是内容。尤其是文本内容。豆瓣豆瓣前段时间小改了一下,页面拉宽,
- 推荐阅读:Oracle读取excel数据oracle导出excel(非csv)的方法有两种,1、使用sqlplus spool,2、使用包体
- 如下所示:import urllib.requestimport urllib.parseurl = 'https://weibo.
- 在密码学中,凯撒密码(或称恺撒加密、恺撒变换、变换加密)是一种最简单且最广为人知的加密技术。它是一种替换加密的技术。这个加密方法是以恺撒的名
- 应用场景:工作中经常遇到大量的数据需要整合、去重、按照特定格式导出等情况。如果用 Excel 操作,不仅费时费力,还不准确,有么有更高效的解
- 这篇论坛文章详细的讲解了使用SQL Server 2008管理非结构化数据的具体方法,更多内容请参考下文:microsoft SQL Ser
- 一、成员 1.1 变量实例变量,属于对象,每个对象中各自维护自己的数据。类变量,属于类,可以被所有对象共享,一般用于给对象提供公共
- 今天突然想起这个问题, 就好好搜索整理一下,不过在开始归纳之前,请先来一起做做这个小实验:忽略一切实际的外在情况, 你看了下面的按钮,第一本
- 在使用Python处理数据时,经常需要对数据筛选。这是在对时间筛选时,判断两列时间是否相差一年,如果是,则返回符合条件的所有列。data原始
- 问题描述当前环境win10,python_3.6.1,64位。在windows下,在dos中运行pip install Scrapy报错:b
- kelon 问:格式如下:s="地,在要,大,奇功,不知,但是,不示"我想把它split分出來,变成数组來循环,但是不知
- 这方面我还是一个freshman,不过看了一些文章,经过一些实践后也算是有了一些想法。希望如果有这方面的前辈路过的话,能不吝指教。首先,作为
- 在SQL Server 2008 中,新的FILESTREAM 数据类型,允许像文件和图片这种大型的二进制数据可以直接在NTFS文件系统中进
- 五、过渡转化的使用在《mind hack》一书中,揭示了人脑鲜为人知的工作原理。其中提到了“突然的移动或闪烁会吸引人的注意力,这正是负责视觉