使用Ajax提交表单失败Django后端无法接收数据
报错:NOT NULL constraint failed或django.utils.datastructures.MultiValueDictKeyError
处理方法
将原本使用
$('#change_form{{i.username}}')
或
$('#change_form{{i.username}}').serialize()
读取的表单数据改为使用
var upload_form = new FormData(document.getElementById("change_form{{i.username}}"))
进行读取
错误原因
出现这两种报错均是因为Django后端没有能够成功获取到数据。这是ajax提交到后端的数据格式出现了问题,无法被request.POST.get()方法正确识别导致的。
在我的代码中,刚开始复制了网上的ajax代码:
function textchange_form_submit{{i.username}}(){
$.ajax({
cache: false,
type: "POST",
url:"{% url 'profile_change' %}",
data:$('#change_form{{i.username}}').serialize(),// 序列化表单值
dateType:"json",
async: false,
contentType: false,
processData: false,
success: function(data) {
if(data.status == 'success'){
alert("{{i.name}}信息提交成功");
window.location.reload();//刷新当前页面.
}else if(data.status == 'fail'){
alert("{{i.name}}信息提交错误,请重新提交");
alert($('#change_form{{i.username}}'));
}
},
});
}
这里使用.serialize()方法之后,会将form表单序列化为一个字符串,而后将这个字符串传递到后端。了解form通过post传到后端的数据格式之后就不难理解为什么使用.serialize()方法传递到后端的数据无法被request.POST.get()方法识别了。
而FormData方法则不一样,FormData方法会将form表单元素的name与value进行组合,实现表单数据的序列化。
修改后代码变为:
function textchange_form_submit{{i.username}}(){
var upload_form = new FormData(document.getElementById("change_form{{i.username}}"));
$.ajax({
cache: false,
type: "POST",
url:"{% url 'profile_change' %}",
data:upload_form,
dateType:"json",
async: false,
contentType: false,
processData: false,
success: function(data) {
if(data.status == 'success'){
alert("{{i.name}}信息提交成功");
window.location.reload();//刷新当前页面.
}else if(data.status == 'fail'){
alert("{{i.name}}信息提交错误,请重新提交");
alert($('#change_form{{i.username}}'));
}
},
});
}
再次运行就不会出现上文提到的报错了,在数据库中检查数据也能看到正确提交。
版权声明:本文为qq_34422681原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。