Ajax上传数据与文件与后端Django数据接收——两端引渡数据协议

Ajax上传数据与文件与后端Django数据接收——两端引渡数据协议

日前前言

这两天做管理台,重写了前端后端所有关于管理的页面、功能。每一个管理卡片都通过jq的load()方法异步加载。这样的方式极大的节省了管理台的资源加载过程和时间。

但同时也引出了一些问题,当我想提交POST表单的时候,不能直接加入在html结构中直接加入{% csrf_token %}进行后端验证,这个时候,ajax便又登场了,但由于前端发送的数据和后端接收的数据始终不同—_—!!就跟标题一样,漫长的引渡过程,耗了我整整一天的时间才解决,接下来将详细描述踩坑过程
Ajax上传数据与文件与后端Django数据接收——两端引渡数据协议_第1张图片

一、前端——把表单的架子画出来

Ajax上传数据与文件与后端Django数据接收——两端引渡数据协议_第2张图片


导入MD

分类选择:

Python
Django
JavaScript
Css
Linux
安全
树莓派

导入MD文件:

导入附属图片:


加以了一些样式过后差不多就是这个样式,这步不用怎么关心,只要有功能就好了
Ajax上传数据与文件与后端Django数据接收——两端引渡数据协议_第3张图片


二、前端——如何通过js获取表单的数据和文件对象

通过ajax发送数据和文件两种东西的话,是不能直接通过$('elm').val()这种方式获取到值的。需要新构造一个FormData然后去继承html中的form

var formDataOld = new FormData($('.g-body-importMD'));		// 继承
// 用get方法获取到htmlF这个FileInput中的值,注意,直接打印FormData是没有数据的
var fileHtml = formDataOld.get('htmlF');	

这里有个特殊情况,MD文件我们只需要获取它的文件内容,如果把他也发送给服务器必定会造成响应速度减慢和资源浪费,怎么办呢?这里再新构建一个FormData,然后一个一个的append进FormData即可

// 自定义的表单
var formData = new FormData();
// 获取用户上传文件的信息(html表单)
var formDataOld = new FormData($('.g-body-importMD'));
var fileHtml = formDataOld.get('htmlF');
// 获取文章分类
$("input:checkbox[name=category]:checked").each(function (i) {
    formData.append('categoryList',$(this).val());   // 若需要对应一个列表,那就for循环append即可
});
// 获取文章标题(获取的是文件名,所以清一下后缀)
var fileTitle = fileHtml.name.replace('.html', '');

// 加入所有附属图片到自构建表单内
var photoFiles = document.getElementById("s-imgF").files;
for(var i=0;i

这一系列的操作过后,我们最终得到的是一个名为formData的表单对象,可通过上一步的formData.get()函数分别获取到categoryListfileTitleHfileContextHimgF这四个键的值,如下图:
Ajax上传数据与文件与后端Django数据接收——两端引渡数据协议_第4张图片


这里看着可能会感觉很乱,怎么就突然冒出来一大堆代码了,心情就跟表情包一样,但是实际上都是些重复的操作,复制到自己的js里执行一下就会恍然大悟的

Ajax上传数据与文件与后端Django数据接收——两端引渡数据协议_第5张图片


三、前端——如何携带建好的表单对象发送给后端Django

只要我们把上一步构建好的formData对象直接加入ajax的data里就可以了,Django在获取的时候会直接解析这个表单

其中有一个小问题,就是Djang的csrf会返回403,详细的解决方法可以参看之前写过的文章Ajax常用方法与后端(Django)通信403的解决方案。


                    
                    

你可能感兴趣的:(Ajax,Django,前端组件)