前后端传输数据的编码格式主要有三种, 本文接下来将详细演示。
urlencoded formdata json
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() 方法可将,
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格式数据给Django后端,请一定注意以下三点:
$("#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) } }); });
// 第一种方式直接在发送数据中加入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
联动下拉菜单是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 %}{% endblock %}创建用户 - 联动下拉菜单
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)
前端模板及js文件如下所示, 请注意我们是如何在表单中加入了enctype属性,如何使用FormData上传文件,并解决了csrftoken问题的。
{% block content %}
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.'})
以上就是Django如何与Ajax交互的详细内容,更多关于Django与Ajax交互的资料请关注其它相关文章!