Ajax提交表单失败Django无法接收数据,NOT NULL constraint failed或django.utils.datastructures.MultiValueDictKeyError

使用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版权协议,转载请附上原文出处链接和本声明。